javascript - Highcharts 在折线图上包装processData不会绘制正确的数据点

我的目标是在折线图的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轴极限的变化，但是仍然按照原始值绘制了数据点（这是一个小提琴：http://jsfiddle.net/oL3LfrLr/）

我怀疑这可能是一个范围界定问题，但是我真的看不出上面有什么问题。有小费吗？

为什么要包装processData？

不敢诚实。我对javascript和HighCharts相当陌生，这是我的第一个扩展。我看了Waterfall Series，它做了我想要的一部分，从我“猜测”的源头来看，它可能是translate或processData方法。后者听起来最有前途，所以我从那里开始。

最佳答案

实际上，您需要包装这两种方法，就像瀑布系列一样。 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/