Question

在Highcharts 2中，很容易使用series.addPoint(p)添加一个点，其中该点的x值落在两个现有点的x值之间。

示例：假设您要创建一个包含两个点的系列图表：

var p1 = {x: 100, y: 50};
var p2 = {x: 200, y: 40};

var data = [];
data.push(p1);
data.push(p1);

var c = new Highcharts.Chart({
  ...//code omitted
  type: 'line',
  data: data,
  ...//code omitted

});

在第二版中，您可以通过以下方式调用在这两者之间添加一个点：

var p3 = {x: 150, y: 60};

c.series[0].addPoint(p3, true);

对于'line'图表，highcharts 2会自动确定p3的x值落在p1和p2的x值之间，因此该行将按顺序绘制：p1，p3，p2。 / p>

我们发现在highcharts 3中，线条以p1，p2，p3的顺序通过点绘制 - 这意味着它“重新回归”。

我准备了以下jsFiddle示例，它们将50个点添加到具有随机x和y值的现有系列中。：

Highcharts 2.1.9：http://jsfiddle.net/HdNh2/4/

Highcharts 3.0.0：http://jsfiddle.net/HdNh2/5/

这是可以解决的问题，还是我们需要尝试规避问题？

提前致谢...

ħ

Answer 1

所以只是为了解决这个问题：Highcharts确认自2.2.x以来逻辑发生了变化。

在我们的案例中，重新渲染整个图表很简单，但我怀疑series.setData()也是一个选项。

Answer 2

这是一种解决方法。这将在他们手动添加的x值上对点进行排序。此事件对象位于图表对象选项块中。

events: {
    click: function(e) {
        // find the clicked values and the series
        var series = this.series[DIA.currentSeriesIndex],
            x = parseFloat(e.xAxis[0].value),
            y = parseFloat(e.yAxis[0].value);

        // Add it
        series.addPoint([x, y]);

        if ( series.data.length > 1) {
            // grab last point object in array
            var point = series.data[series.data.length-1];
            // sort the point objects on their x values
            series.data.sort(function (a, b)
            {
                //Compare "a" and "b" and return -1, 0, or 1
                return (a.x - b.x);
            });
            // force a redraw
            point.update();
        }
    }
}

highcharts 3 addPoint点顺序

2 个答案: