Highcharts：如何将图例链接到类别而不是酒吧系列？

Question

Using Highcharts to display a bar chart, is there a built-in way to link legend items to categories rather than to series? As such I would see a chart with a bunch of bars, and when I click a legend item it would show or hide just the bar(s) associated with a single category.

Thanks

Answer 1

There is not a built in way.

You can fake it in a number of ways, however.

One way is to use a separate series for each category, set grouping to false, dummy the x values to hover around the actual category value.

plotOptions: {
  series: {
    grouping: false,
    pointRange: 0.2
  }
},    
series: [{
  name: 'Group A',
  data: [[-0.25,5],[0,7],[0.25,6]]
}]

Example:

• http://jsfiddle.net/jlbriggs/x1cdz54r/

Answer 2

In the end, I found no out-of-the-box way to do this. But I found a solution that works, as follows:

1. correlate each bar with a single series (see fiddle referenced above)

2. in legendItemClick:

   • manually show or hide the series associated with the clicked-on legend item
   • given visibility of each category, recompute the indices of each visible category and update each visible bar series data[0].x with the new index of the category with which it is associated (use point.update())
   • call xAxis.setCategories with a list of the categories you want to be currently visible
   • call xAxis.setExtremes with the new extremes for the category indices

Here is a very simple example of the above:

legendItemClick = function (e) {
        var seriesClicked = e.currentTarget;
        var chart = seriesClicked.chart;
        var axis = chart.xAxis[0]

    if (seriesClicked.visible) {
        seriesClicked.hide();
        chart.series[2].data[0].update( { x: 1 });
        axis.setCategories(['Group A', 'Group C'], false)
        axis.setExtremes(0, 1, true)

    } else {
        seriesClicked.show();
        chart.series[2].data[0].update( { x: 2 });
        axis.setCategories(['Group A', 'Group B', 'Group C'], false)
        axis.setExtremes(0, 2, true)
    }
    return false;
}

And a fiddle: http://jsfiddle.net/dkent600/e6357a22/17/