如何在Chart.js中绘制X轴（Y = 0处的线）？

Question

我想绘制X轴，即在Y = 0处的水平线，以更好地看到Y的正值和负值在哪里。

我想是这样的：

这是可能的Chart.js

编辑1

我想画在图表对象行，所以能与它进行交互。例如：X轴上的点可以被绘制为绿色，并且它下面的点可以是红色的。

Answer 1

您可以扩展图表两者都做 - 绘制线条和色彩的点

Chart.types.Line.extend({ 
    name: "LineAlt", 
    initialize: function (data) { 
     Chart.types.Line.prototype.initialize.apply(this, arguments); 

     this.datasets.forEach(function (dataset, i) { 
      dataset.points.forEach(function (point) { 
       // color points depending on value 
       if (point.value < 0) { 
        // we set the colors from the data argument 
        point.fillColor = data.datasets[i].pointColor[0]; 
       } else { 
        point.fillColor = data.datasets[i].pointColor[1]; 
       } 
       // we need this so that the points internal color is also updated - otherwise our set colors will disappear after a tooltip hover 
       point.save(); 
      }) 
     }) 
    }, 
    draw: function() { 
     Chart.types.Line.prototype.draw.apply(this, arguments); 

     // draw y = 0 line 
     var ctx = this.chart.ctx; 
     var scale = this.scale; 
     ctx.save(); 
     ctx.strokeStyle = '#ff0000'; 
     ctx.beginPath(); 
     ctx.moveTo(Math.round(scale.xScalePaddingLeft), scale.calculateY(0)); 
     ctx.lineTo(scale.width, scale.calculateY(0)); 
     ctx.stroke(); 
     ctx.restore(); 
    } 
}); 

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      fillColor: "rgba(220,220,220,0.2)", 
      strokeColor: "rgba(220,220,220,1)", 
      // point color is a an array instead of a string 
      pointColor: ["rgba(220,0,0,1)", "rgba(0,220,0,1)"], 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(220,220,220,1)", 
      data: [65, 59, 80, 81, -56, -55, 40] 
     } 
    ] 
}; 

var ctx = document.getElementById("myChart").getContext("2d"); 
// use our new chart type LineAlt 
var myNewChart = new Chart(ctx).LineAlt(data); 

---

小提琴 - http://jsfiddle.net/mbddzwxL/