Chart.js what is the new syntax for extending?

问题

So while looking at some code samples for Chart.js I came across the following JSFiddle ( http://jsfiddle.net/dbyze2ga/14/ ). When I coped it over to my IDE (brackets.io) it did not work until I realized that this jsfiddle uses chart.js 1.x.x.

What is the current syntax for extending Charts using v2.0? I tried checking the documentation; but it honestly left me even more confused. Doesn't help that, at least in the case of Brackets, it won't show any real useful dot completion for the chart.

The JS code in question is:

var data = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    datasets: [{
        data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    }]
};

var ctx = document.getElementById("LineWithLine").getContext("2d");

Chart.types.Line.extend({
    name: "LineWithLine",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var point = this.datasets[0].points[this.options.lineAtIndex]
        var scale = this.scale

        // draw line
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(point.x, scale.startPoint + 24);
        this.chart.ctx.strokeStyle = '#ff0000';
        this.chart.ctx.lineTo(point.x, scale.endPoint);
        this.chart.ctx.stroke();

        // write TODAY
        this.chart.ctx.textAlign = 'center';
        this.chart.ctx.fillText("TODAY", point.x, scale.startPoint + 12);
    }
});

new Chart(ctx).LineWithLine(data, {
    datasetFill : false,
    lineAtIndex: 2
});

回答1:

2.0 changes are explained in documentation:

var myLineExtend = Chart.controllers.line.prototype.draw;

var ctx = document.getElementById("LineWithLine").getContext("2d");

var config = {
  type: 'line',
  data: {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    datasets: [{
      data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    }],
    datasetFill : false,
    lineAtIndex: 2
  }
};

Chart.helpers.extend(Chart.controllers.line.prototype, {
    draw: function () {
    
      myLineExtend.apply(this, arguments);   

      var chart = this.chart;
      var ctx = chart.chart.ctx;

      var index = chart.config.data.lineAtIndex;
      var xaxis = chart.scales['x-axis-0'];
      var yaxis = chart.scales['y-axis-0'];

      ctx.save();
      ctx.beginPath();
      ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top + 24);
      ctx.strokeStyle = '#ff0000';
      ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
      ctx.stroke();
      ctx.restore();

      ctx.textAlign = 'center';
      ctx.fillText("TODAY", xaxis.getPixelForValue(undefined, index), yaxis.top + 12);

    }
});

new Chart(ctx, config);

<script src="https://github.com/chartjs/Chart.js/releases/download/v2.6.0/Chart.bundle.min.js"></script>
<canvas id="LineWithLine"></canvas>

来源：https://stackoverflow.com/questions/45023773/chart-js-what-is-the-new-syntax-for-extending

标签

javascript

chart.js