Question

我无法从this JSFiddle获取适合于Chart.js最新版本的代码。（基本上，我画了两条线，如果我正确理解的话，给人的印象是一条线部分是连续的，部分是虚线的。）我曾在类似但更简单的情况下查看过this example从版本1升级到版本2的情况，但我不断遇到错误，不知道该怎么办。有效的html代码是这样的：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="700px" height="500px"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script type="text/javascript">
Chart.types.Line.extend({
  name: "LineAlt",
  initialize: function (data) {
    var strokeColors = [];
    data.datasets.forEach(function (dataset, i) {
      if (dataset.dottedFromLabel) {
        strokeColors.push(dataset.strokeColor);
        dataset.strokeColor = "rgba(0,0,0,0)"
      }
    })

    Chart.types.Line.prototype.initialize.apply(this, arguments);

    var self = this;
    data.datasets.forEach(function (dataset, i) {
      if (dataset.dottedFromLabel) {
        self.datasets[i].dottedFromIndex = data.labels.indexOf(dataset.dottedFromLabel) + 1;
        self.datasets[i]._saved = {
          strokeColor: strokeColors.shift()
        }
      }
    })
  },
  draw: function () {
    Chart.types.Line.prototype.draw.apply(this, arguments);

    // from Chart.js library code
    var hasValue = function (item) {
      return item.value !== null;
    },
        nextPoint = function (point, collection, index) {
          return Chart.helpers.findNextWhere(collection, hasValue, index) || point;
        },
        previousPoint = function (point, collection, index) {
          return Chart.helpers.findPreviousWhere(collection, hasValue, index) || point;
        };

    var ctx = this.chart.ctx;
    var self = this;
    ctx.save();
    this.datasets.forEach(function (dataset) {
      if (dataset.dottedFromIndex) {
        ctx.lineWidth = self.options.datasetStrokeWidth;
        ctx.strokeStyle = dataset._saved.strokeColor;

        // adapted from Chart.js library code
        var pointsWithValues = Chart.helpers.where(dataset.points, hasValue);
        Chart.helpers.each(pointsWithValues, function (point, index) {
          if (index >= dataset.dottedFromIndex)
            ctx.setLineDash([3, 3]);
          else
            ctx.setLineDash([]);

          if (index === 0) {
            ctx.moveTo(point.x, point.y);
          }
          else {
            if (self.options.bezierCurve) {
              var previous = previousPoint(point, pointsWithValues, index);
              ctx.bezierCurveTo(
                previous.controlPoints.outer.x,
                previous.controlPoints.outer.y,
                point.controlPoints.inner.x,
                point.controlPoints.inner.y,
                point.x,
                point.y
              );
            }
            else {
              ctx.lineTo(point.x, point.y);
            }
          }

          ctx.stroke();
        }, this);
      }
    })
    ctx.restore();
  }
});

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "My First dataset",
      fillColor: "rgba(151,187,205,0.2)",
      strokeColor: "rgba(151,187,205,1)",
      pointColor: "rgba(151,187,205,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(151,187,205,1)",
      data: [65, 59, 80, 81, 56, 55, 40],

      dottedFromLabel: "March"
    }
  ],
};

var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx).LineAlt(data);


</script>
</body>
</html>

我将不胜感激。

扩展折线图时Chart.js从版本1升级到版本2

0 个答案: