使用Highcharts的XY轨迹图

Question

我正在尝试使用Javascript和Highcharts实时绘制轨迹。数据将来自外部传感器，但目前我正在练习这个例子： http://jsfiddle.net/0fp1gzw8/1/

如您所见，JS片段尝试使用余弦和正弦函数绘制圆形：

load: function () {

  var series = this.series[0];

  setInterval(function () {

    a = a + 0.1;
    x = Math.sin(a),
    y = Math.cos(a);

    series.addPoint([x, y], true);

  }, 100);
}

问题是，一旦该点越过x轴，就不再在两个连续样本之间绘制线段，而是将新样本与之前已绘制的旧样本之一连接起来：

我如何解决这个问题并得到一个干净的x-y图？

由于

Answer 1

Highcharts期望样条/折线图数据始终按x值排序。有了这个期望，当你打电话给addPoint时，看起来它将线段绘制到前一个x值而不是先前添加的点。

如果您switch your code使用setData：

var data = [];
var series = this.series[0];
setInterval(function () {
  a = a + 0.1;
  x = Math.sin(a),
  y = Math.cos(a);
  data.push([x,y]);
  series.setData(data, true);
}, 100);

它正确绘制了线段但你在控制台中得到了很多这些错误：

Highcharts error #15: www.highcharts.com/errors/15 

您可能有更好的运气切换到没有此限制的scatter chart。如果您需要线段，可以使用Renderer自行添加。