javascript - Highcharts 中的多类别选择图表

Question

我正在努力在 Highcharts 中创建多选柱形图。 我的目标是让用户能够选择/取消选择图表的任何类别。

预期行为:

1. 在类别(即“0 - 1M”)上单击，两个条形图都应更改颜色。再次单击该类别将恢复颜色。

2. 如何通知外部应用程序(AngularJS)所选列？

我使用的是allowPointSelect: true，但它只选择类别的一列，而不是两列。

allowPointSelect: true,

不确定如何从这里继续。

JSfiddle 在这里 - http://jsfiddle.net/w7dvrkhz/9/

请问有什么想法吗？

Answer 1

1. 此自定义行为可以在 plotOptions.series.point.events.click 属性的回调函数中轻松编程:

  point: {
    events: {
        click: function() {
        var clickedPoint = this,
            chart = clickedPoint.series.chart;

        chart.series.forEach(function(s) {
            s.points.forEach(function(p) {
            if(p.x == clickedPoint.x) {
              p.select(null, true);
            }
          });
        });
      }
    }
  },

现场演示: http://jsfiddle.net/kkulig/d37x5mo7/

使用上述代码时需要禁用

allowPointSelect。

API 引用:

• https://api.highcharts.com/highcharts/plotOptions.series.point.events.click
• https://api.highcharts.com/class-reference/Highcharts.Point#select

<小时/>

2.我对 Angular 不太了解，但我在第一点中使用的事件似乎是检查当前选择了哪些点的好地方。