在多个 Highcharts 树状图上选择点

Question

目标：我有两个相同的 Highcharts 树形图，如果我 select 一个图表的一个点，我也想发送一个 select 事件到第二个图表的点具有相同的 id/相同的位置。

进度: 我遵循了这些 answers that tackle the same problem, only for line graphs, and then adopted the fiddle posted there for treemaps. You can find it 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);
});

问题: 然而另一个图表的对应点没有selected。关于如何修复它有什么建议吗？

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 < v4

问题是 treemap 没有 states.select 选项 (API: http://api.highcharts.com/highcharts#plotOptions.treemap.states ) so even, when you force select-ed state, then nothing visually changes on your chart. You can add that state manually: 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"
                        }
                   });
                });
            }
        }
    },

注意： 您的 selecting/deselecting 点的逻辑缺少检查当前单击的点是否已被单击。

在多个 Highcharts 树状图上选择点

Selecting Points over multiple Highcharts treemaps

javascript

treemap

highcharts