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

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

我想要这样的东西：

这在中国可能吗

编辑1

---

我想在图表对象中画一条线，以便能够与之交互。例如：X轴上的点可以绘制为绿色，而X轴下的点可以绘制为红色。

您可以扩展图表来完成这两项工作-绘制直线并给点上色

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

Chart.types.Line.extend({
名称：“LineAlt”，
初始化：函数（数据）{
Chart.types.Line.prototype.initialize.apply（这是参数）；
this.datasets.forEach（函数（dataset，i）{
dataset.points.forEach（函数（点）{
//颜色点取决于值
如果（点值<0）{
//我们从数据参数设置颜色
point.fillColor=data.dataset[i].pointColor[0]；
}否则{
point.fillColor=data.dataset[i].pointColor[1]；
}
//我们需要这样做，以便点的内部颜色也会更新-否则，我们设置的颜色将在工具提示悬停后消失
point.save（）；
})
})
},
绘图：函数（）{
Chart.types.Line.prototype.draw.apply（这是参数）；
//画y=0线
var ctx=this.chart.ctx；
var-scale=这个.scale；
ctx.save（）；
ctx.strokeStyle='#ff0000'；
ctx.beginPath（）；
ctx.moveTo（Math.round（scale.xScalePaddingLeft）、scale.calculateY（0））；
ctx.lineTo（比例.宽度，比例.计算（0））；
ctx.stroke（）；
ctx.restore（）；
}
});
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
//点颜色是数组而不是字符串
点颜色：[“rgba（220,0,0,1）”，“rgba（0220,0,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[65,59,80,81，-56，-55,40]
}
]
};
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
//使用我们的新图表类型LineAlt
var myNewChart=新图表（ctx）.LineAlt（数据）；

---

小提琴-

您可以使用：

scales: {
    xAxes: [{
        gridLines: {
            zeroLineWidth: 3,
            zeroLineColor: "#2C292E",
        },

    }]
}

---

Blockquote

是否要在图像上画线？我想在图表对象中画线，以便能够与之交互。例如：X轴上的点可以画成绿色，它下面的点可以画成红色。我想你需要看看这里，看起来你在找这样的东西