Chart.js 2.0 - các đường thẳng đứng

Question

Bất kỳ ai cũng có thể cho tôi biết cách mở rộng Chart.js v2.0. Tôi cần các đường thẳng đứng trong biểu đồ dạng đường và tôi muốn triển khai một cái gì đó tương tự như http://jsfiddle.net/dbyze2ga/.

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 
}); 

Answer 1

CẬP NHẬT: Xem https://stackoverflow.com/a/45092928/360067 cho một giải pháp đơn giản và mạnh mẽ hơn bằng cách sử dụng biểu đồ Chú thích plugin.

Bạn có thể mở rộng các loại line thêm hỗ trợ cho vẽ một đường

---

Preview

---

Script

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

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

    var index = chart.config.data.lineAtIndex; 
    if (index) { 
     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); 
     ctx.strokeStyle = '#ff0000'; 
     ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom); 
     ctx.stroke(); 
     ctx.restore(); 
    } 
    } 
}); 

và sau đó

var config = { 
    type: 'line', 
    data: { 
    labels: ... 
    datasets: [ 
     ... 
    ], 
    lineAtIndex: 2 
    } 
}; 

---

Fiddle - http://jsfiddle.net/mn8x6fso/

Answer 2

Đối với những người tìm kiếm đường ngang, đây là những gì tôi đã nhận cho đến nay:

ctx.save(); 
    ctx.beginPath(); 
    ctx.moveTo(xaxis.left, limits[i].value); 
    ctx.strokeStyle = limits[i].color; 
    ctx.lineTo(xaxis.right, limits[i].value); 
    ctx.stroke(); 
    ctx.restore(); 

jsFiddle

Answer 3

Đối với v2.0, cách tốt nhất là sử dụng các biểu đồ Chú thích Plugin (https://github.com/chartjs/chartjs-plugin-annotation)

Fiddle - https://codepen.io/anon/pen/ZywgKr

Script

var ctx = document.getElementById("canvas").getContext("2d"); 
new Chart(ctx, { 
    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] 
     } 
     ] 
    }, 
    options: { 
     annotation: { 
     annotations: [ 
      { 
      type: "line", 
      mode: "vertical", 
      scaleID: "x-axis-0", 
      value: "MAR", 
      borderColor: "red", 
      label: { 
       content: "TODAY", 
       enabled: true, 
       position: "top" 
      } 
      } 
     ] 
     } 
    } 
    } 
); 

---

Chữ thập posted từ https://github.com/chartjs/Chart.js/issues/4495#issuecomment-315238365