javascript - Highcharts 折线图上的 processData 未绘制正确的数据点

Question

我的目标是在折线图的 Y 轴上有一个新选项，允许在常规 Y 数据系列(例如 [1,2,3])或原始数据系列的累积([1, 3,6])。

我首先按如下方式包装 processData 方法

(function (H) {

  H.wrap(H.seriesTypes.line.prototype, 'processData', function(force) {
    var yData = this.yData;

    for (var i = 1; i < yData.length; i++) {
      yData[i] = yData[i] + yData[i-1];
    };

    //alert(this.yData);

    force.apply(this, Array.prototype.slice.call(arguments, 1));
  });


} (Highcharts));

this.yData 让我可以访问正确的数据，其余的就非常简单了。绘制时，我确实看到 Y 轴限制按预期变化，但数据点仍然根据其原始值绘制(这里有一个 fiddle : http://jsfiddle.net/oL3LfrLr/ )

我怀疑这可能是一些范围问题，但我真的不明白上面有什么问题。有什么建议吗？

为什么要包装processData？

说实话，我不确定。我对 javascript 和 HighCharts 相当陌生，这是我的第一个扩展。我看了Waterfall Series它完成了我想要的部分内容，从我“猜测”的来源来看，它将是 translate 或 processData 方法。后者听起来最有希望，所以我从那里开始。

Answer 1

事实上你需要包装这两种方法，就像瀑布系列一样。 processData 对于 yAxis 极值是必需的，translate 负责将点的值转换为 x-y 坐标。

就我个人而言，我会使用generatePoints，而不是translate。像这样的事情:

(function (H) {

  H.wrap(H.seriesTypes.line.prototype, 'processData', function (proceed) {
            var yData = this.yData,
            points = this.points;

    if(!this.afterCalc) {
      for (var i = 1; i < yData.length; i++) {
        yData[i] = yData[i] + yData[i-1];
      };
    }
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  });

  H.wrap(H.seriesTypes.line.prototype, 'generatePoints', function (proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
            var yData = this.yData,
            points = this.data;
    if(!this.afterCalc) {
      for (var i = 1; i < yData.length; i++) {
        points[i].y = yData[i];
      };
      this.afterCalc = true; // calculate this only once
    }
  });


} (Highcharts));

演示:http://jsfiddle.net/oL3LfrLr/2/