Saya membuat bagan rentang kolom grafik tinggi. Saya ingin legenda khusus sehingga legenda akan ditampilkan sesuai dengan "legendGrouping" dan warna terkait untuk seri itu. Dari contoh jsfiddle di bawah ini saya mengharapkan legenda untuk ditampilkan:

  • Berlari (hijau)
  • Kegagalan (merah)
  • Non-Gagal (kuning)
  • Dikecualikan (abu-abu)

Inilah jsfiddle sejauh ini.

Highcharts.chart('ChartColumnRangeMtbf', {
  chart: {
    type: 'columnrange',
    height: 300,
    inverted: true
  },
  title: {
    text: null
  },
  xAxis: {
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    tickLength: 0
  },
  yAxis: {
    gridLineWidth: 0,
    max: 1511182800000,
    min: 1510318800000,
    lineColor: 'transparent',
    startOnTick: false,
    endOnTick: false,
    labels: {
      enabled: false
    },
    title: {
      text: null,
    },
    type: 'datetime'
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      },
      animation: true
    },
    series: {
      cursor: 'pointer',
      borderWidth: 0,
      point: {
        events: {
          click: function() {
            location.href = '../eventview?EventID=' + this.options.id;
          }
        }
      }
    }
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%H:%M', this.point.low) +
        ' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
    }
  },
  legend: {
    enabled: true
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Running',
    legendGrouping: 'Running',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 0,
    data: [{
      low: 1510318800000,
      high: 1511182800000,
      color: '#6cc14c'
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Excluded',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 294,
      "low": 1510750800000,
      "high": 1510751592000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Non-Failure',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 256,
      "low": 1510664400000,
      "high": 1510677352000,
      "color": "#fde54a"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Excluded',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 238,
      "low": 1510663020000,
      "high": 1510664400000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Excluded',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 236,
      "low": 1510662963000,
      "high": 1510662967000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Failure',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 213,
      "low": 1510661669000,
      "high": 1510662860000,
      "color": "#d9534f"
    }]
  }]
});

Terima kasih semuanya

0
Stephen Richardson 8 Desember 2017, 18:41

1 menjawab

Jawaban Terbaik

Menggunakan series.bar.linkedTo untuk membuat legenda umum untuk Dikecualikan (3 peristiwa) .

legend.labelFormatter untuk memformat legenda

Highcharts.chart('ChartColumnRangeMtbf', {
  chart: {
    type: 'columnrange',
    height: 300,
    inverted: true,
  },
  title: {
    text: null
  },
  xAxis: {
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    tickLength: 0
  },
  yAxis: {
    gridLineWidth: 0,
    max: 1511182800000,
    min: 1510318800000,
    lineColor: 'transparent',
    startOnTick: false,
    endOnTick: false,
    labels: {
      enabled: false
    },
    title: {
      text: null,
    },
    type: 'datetime'
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      },
      animation: true
    },
    series: {
      cursor: 'pointer',
      borderWidth: 0,
      point: {
        events: {
          click: function() {
            location.href = '../eventview?EventID=' + this.options.id;
          }
        }
      }
    }
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%H:%M', this.point.low) +
        ' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
    }
  },
  legend: {
    symbolPadding: 0,
    symbolWidth: 0.1,
    symbolHeight: 0.1,
    symbolRadius: 0,
    useHTML: true,
    labelFormatter: function() {
    //console.log(this.userOptions.legendGrouping)
            return '<div>' +
            '<div style="width: 18px; height: 12px; display: inline-block; background-color: ' + this.options.data[0].color + ';"> </div>' +
            "<span> " + this.userOptions.legendGrouping + " </span>" +
            '</div>'
        }
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Running',
    legendGrouping: 'Running',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 0,
    data: [{
      low: 1510318800000,
      high: 1511182800000,
      color: '#6cc14c'
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Excluded',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    id:'ex',
    data: [{
      "id": 294,
      "low": 1510750800000,
      "high": 1510751592000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Non-Failure',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 256,
      "low": 1510664400000,
      "high": 1510677352000,
      "color": "#fde54a"
    }]
  }, {
    name: 'Events',
    linkedTo:'ex',
    legendGrouping: 'Excluded',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 238,
      "low": 1510663020000,
      "high": 1510664400000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Excluded',
    linkedTo:'ex',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 236,
      "low": 1510662963000,
      "high": 1510662967000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Failure',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 213,
      "low": 1510661669000,
      "high": 1510662860000,
      "color": "#d9534f"
    }]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="ChartColumnRangeMtbf" style="min-width: 300px; height: 300px; margin: 0 auto"></div>

Atau

Jika Anda dapat memperbarui data seri dan menambahkan color sebagai atribut seperti yang Anda tambahkan dalam data seri. Dan juga hapus colorByPoint: true,

Highcharts.chart('ChartColumnRangeMtbf', {
  chart: {
    type: 'columnrange',
    height: 300,
    inverted: true,
  },
  title: {
    text: null
  },
  xAxis: {
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    tickLength: 0
  },
  yAxis: {
    gridLineWidth: 0,
    max: 1511182800000,
    min: 1510318800000,
    lineColor: 'transparent',
    startOnTick: false,
    endOnTick: false,
    labels: {
      enabled: false
    },
    title: {
      text: null,
    },
    type: 'datetime'
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      },
      animation: true
    },
    series: {
      cursor: 'pointer',
      borderWidth: 0,
      point: {
        events: {
          click: function() {
            location.href = '../eventview?EventID=' + this.options.id;
          }
        }
      }
    }
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%H:%M', this.point.low) +
        ' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
    }
  },
  legend: {

    useHTML: true,
    labelFormatter: function() {
            return  this.userOptions.legendGrouping 
        }
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Running',
    legendGrouping: 'Running',
     color: '#6cc14c',
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 0,
    data: [{
      low: 1510318800000,
      high: 1511182800000,
      color: '#6cc14c'
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Excluded',
    "color": "#b5b2b2",
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    id:'ex',
    data: [{
      "id": 294,
      "low": 1510750800000,
      "high": 1510751592000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Non-Failure',
    "color": "#fde54a",
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 256,
      "low": 1510664400000,
      "high": 1510677352000,
      "color": "#fde54a"
    }]
  }, {
    name: 'Events',
    linkedTo:'ex',
    legendGrouping: 'Excluded',
     "color": "#b5b2b2",
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 238,
      "low": 1510663020000,
      "high": 1510664400000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Excluded',
    linkedTo:'ex',
    "color": "#b5b2b2",
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 236,
      "low": 1510662963000,
      "high": 1510662967000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Failure',
    "color": "#d9534f",
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 213,
      "low": 1510661669000,
      "high": 1510662860000,
      "color": "#d9534f"
    }]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="ChartColumnRangeMtbf" style="min-width: 300px; height: 300px; margin: 0 auto"></div>
0
Deep 3015 10 Desember 2017, 01:42