1

在 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);

对于“折线”图表，highcharts 2 将自动确定 p3 的 x 值介于 p1 和 p2 的 x 值之间，因此该线将按以下顺序通过点绘制：p1、p3、p2。

我们发现在 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/

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

提前致谢...

H

4

2 回答 2

0

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

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

于 2013-04-11T09:11:39.277 回答
0

这是一种解决方法。这将在手动添加点时对它们的 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();
        }
    }
}
于 2013-08-14T03:03:02.610 回答