如何在 Chart.js 中繪制 X 軸（Y = 0 處的線）？

Question

我想繪制 X 軸，即 Y = 0 處的水平線，以更好地查看 Y 的正負值在哪里。

我想要這樣的東西：

這在Chart.js 中可能嗎

編輯 1

我想在 Chart 對象中繪制線條，以便能夠與之交互。 例如：X 軸上的點可以繪制為綠色，而其下方的點可以繪制為紅色。

Answer 1

您可以使用 ：

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

    }]
}

塊引用

Answer 2

您可以擴展圖表以執行兩者 - 繪制線條並為點着色

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/