在多个Highcharts树形图上选择点

Question

目标：我有两个相同的Highcharts树形图，如果我选择一个图表中的一个点，我还想将select事件发送到具有相同id /的第二个图表点同样的立场。

进度： 我按照这些answers解决了同样的问题，仅针对折线图，然后采用了那里贴出的小提琴树形图。您可以在here以及以下找到它：

$(function () {
    var prevPid = 0;
    var chart = {
        plotOptions: {
            series: {
                allowPointSelect: true,
                point: {
                    'events': {
                        select: function () {
                            var pId = this.series.data.indexOf(this);
                            var chart1 = $('#container').highcharts();
                            var chart2 = $('#container2').highcharts();
                            chart1.series[0].data[pId].setState('select');
                            chart2.series[0].data[pId].setState('select');
                            chart2.series[0].data[prevPid].setState('');
                            prevPid = pId;
                        }
                    }
                }
            }
        },
        series: [{
            type: "treemap",
            data: [{
                name: 'A',
                value: 6,
                colorValue: 1
            }, {
                name: 'B',
                value: 6,
                colorValue: 2
            }, {
                name: 'C',
                value: 4,
                colorValue: 3
            }]
        }]
    };
    $('#container').highcharts(chart);
    $('#container2').highcharts(chart);
});

问题：但是未选择其他图表的对应点。关于如何解决它的任何建议？

Answer 1

Highcharts v5 + 而不是使用状态，它更容易使用point.update()，演示：http://jsfiddle.net/BlackLabel/hy12z5u7/

设置：

chart: {
  events: {
    load: function() {
      $.each(this.series, function(i, s) {
        $.each(s.data, function(j, p) {
          p.pointAttr = {
            select: {
              color: "red"
            }
          };
        });
      });
    }
  }
},

行动：

    point: {
      'events': {
        click: function() {
          var pId = this.series.data.indexOf(this);
          var chart1 = $('#container').highcharts();
          var chart2 = $('#container2').highcharts();

          chart1.series[0].data[prevPid].update({
            color: chart1.series[0].color
          });
          chart2.series[0].data[prevPid].update({
            color: chart2.series[0].color
          });
          chart1.series[0].data[pId].update({
            color: chart1.series[0].data[pId].pointAttr.select.color
          });
          chart2.series[0].data[pId].update({
            color: chart2.series[0].data[pId].pointAttr.select.color
          });
          prevPid = pId;
        }
      }
    }

Highcharts＆lt; V4

问题是treemap没有states.select选项（API：http://api.highcharts.com/highcharts#plotOptions.treemap.states）所以即使在你强制select - ed状态时，也没有在图表上直观地改变。您可以手动添加该状态：http://jsfiddle.net/tqa6uxdb/3/

    chart: {
        events: {
            load: function() {
                $.each(this.series, function(i, s) {
                   $.each(s.data, function(j, p) {
                        p.pointAttr.select = {
                            fill: "red"
                        }
                   });
                });
            }
        }
    },

注意：您缺少选择/取消选择点的逻辑，检查是否已点击当前点击的点。