Chart.js what is the new syntax for extending?

后端 未结 1 709
予麋鹿
予麋鹿 2021-01-28 02:17

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 (brack

相关标签:
1条回答
  • 2021-01-28 03:04

    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>

    0 讨论(0)
提交回复
热议问题