javascript - Highcharts:为什么重绘会改变所选点的半径？

Question

我有一个与 Highcharts: set 'select' state on a point and maintain it after mouseover? 类似但不同的问题

这与redraw事件之后点的渲染发生的情况有关，而不是mouseover事件。

我在散点图中设置了一个特定点以具有“选择”状态:

var chart = new Highcharts.Chart(options);
chart.get('b').setState('select');

我还在图表选项中定义了 select 状态，如下所示:

 select: {
   radius: 8,
   enabled: true,
   lineColor: 'red',
   fillColor: 'red'
}

该点是红色的，半径为 8，正如您在这个 JSFiddle 中看到的:http://jsfiddle.net/o72xgtfm/3/

但是，当我在图表上运行 redraw 时，颜色保持不变(因此 select 状态仍然清晰地保持在该点上，即 this question is not a duplicate of my other question about select state )但半径减小了。

为什么？我怎样才能让半径在这一点上保持在 8？

Answer 1

这是因为 point.setState('select') 与 point.select(true) 不同。

正如您所指出的，point.select() 是 API 的一部分并且它正在工作 - http://jsfiddle.net/o72xgtfm/5/

事实上，point.select()代码的一部分是point.setState('select')，但它还将point的属性 - 'selected'设置为true，并将point.options.selected设置为true。

select: function (selected, accumulate) {
        var point = this,
            series = point.series,
            chart = series.chart;

        selected = pick(selected, !point.selected);

        // fire the event with the defalut handler
        point.firePointEvent(selected ? 'select' : 'unselect', { accumulate: accumulate }, function () {
            point.selected = point.options.selected = selected;
            series.options.data[inArray(point, series.data)] = point.options;

            point.setState(selected && SELECT_STATE);

            // unselect all other points unless Ctrl or Cmd + click
            if (!accumulate) {
                each(chart.getSelectedPoints(), function (loopPoint) {
                    if (loopPoint.selected && loopPoint !== point) {
                        loopPoint.selected = loopPoint.options.selected = false;
                        series.options.data[inArray(loopPoint, series.data)] = loopPoint.options;
                        loopPoint.setState(NORMAL_STATE);
                            loopPoint.firePointEvent('unselect');
                    }
                });
            }
        });
    },

知道这一点，就可以调用 point.setState('select') 来获得相同的效果 - http://jsfiddle.net/o72xgtfm/6/

chart.get('b').setState('select');
chart.get('b').selected = true;
chart.get('b').options.selected = true;