如何在 Highcharts / Highstocks 中 select 列（跨更多窗格）

Question

我有这个例子：http://jsfiddle.net/qzprvohr/1/

我想要实现的目标 - 如果我点击（仅一次）某列，我需要 select 所有具有相同 x 轴值的列。目前它只适用于点击的一个，其余的是 unselected。也有可能为 selected 列（不是列本身）使用一些背景颜色。 xAxis.crosshair.color & xAxis.crosshair.width 之类的东西用于悬停状态。

我对所有列 select 进行了类似的尝试（但它无法正常工作）：

plotOptions: {        
              series: {
                      allowPointSelect: true,
                      cursor: 'pointer',
                      point: {
                             events: {
                                    click: function (event)
                                    {
                                        var selectedCategory = this.category;
                                        var chart = this.series.chart;
                                        for (var i = 0; i < chart.series.length; i++)
                                        {
                                            for (var j = 0; j < chart.series[i].data.length; j++)
                                            {
                                                if (typeof chart.series[i].data[j] !== "undefined" &&
                                                    chart.series[i].data[j].category == selectedCategory)
                                                {
                                                    chart.series[i].data[j].select(true, true);

                                                }
                                            }
                                        }
                                    }
                                }
                            }}}

Answer 1

我试了一下这个例子，我想我找到了解决方案。如果我使用 setTimeout 函数进行选择，那么所有选中的列都将保持选中状态。我还使用 plotBands 作为另一种背景颜色。此处示例：http://jsfiddle.net/qzprvohr/2/

plotOptions: {
            series: {
                allowPointSelect: true,
                cursor: 'pointer',
                point: {
                    events: {
                        click: function (event) {
                            var clickedPoint = this;
                            setTimeout(function () {
                                var selectedCategory = clickedPoint.category;
                                var chart = clickedPoint.series.chart;
                                for (var i = 0; i < chart.series.length; i++) {
                                    for (var j = 0; j < chart.series[i].data.length; j++) {
                                        if (typeof chart.series[i].data[j] !== "undefined" &&                                                       chart.series[i].data[j].category == selectedCategory) {
                                            chart.series[i].data[j].select(true, true);
                                            chart.xAxis[i].removePlotBand('selection' + i)
                                            chart.xAxis[i].addPlotBand({
                                                color:'red',
                                                from: selectedCategory - 40000000,
                                                to: selectedCategory + 40000000,
                                                id: 'selection'+i
                                            });
                                        }
                                    }
                                }
                            }, 0);
                        }
                    }
                }
            }
        }