ChartJS绘制网格线X轴和Y轴

Question

我第一次尝试使用chart.js。它可以选择显示或隐藏垂直或水平网格线，即scaleShowHorizontalLines: true/false或scaleShowVerticalLines: true/false。但它不会在实际的x轴或y轴上绘制网格线。我该如何绘制x轴或y轴的网格线？

Answer 1

  

但它不会在实际的x轴或y轴上绘制网格线。

设置scaleShowVerticalLines或var myChart = new Chart(ctx).Line(data, { scaleLineColor: 'rgba(0, 0, 0, 0)', ... 并不隐藏x或y轴。

但是，如果你想隐藏它（或让它可见）而不隐藏比例标签，你可以这样做

var myChart = new Chart(ctx).Line(data, {
     scaleLineColor: 'rgba(0, 0, 0, 1)',
     ...

隐藏轴。或者覆盖任何全局配置并显示轴（您可以添加任何颜色）。

showScale

如果您没有看到x和y轴及其标签，则可能全局配置了var myChart = new Chart(ctx).Line(data, { showScale: true, ... false

Chart.types.Bar.extend({
    name: "BarAlt",
    intialize: function () {
        Chart.types.Bar.intialize.draw.apply(this, arguments);
    },
    draw: function () {
        Chart.types.Bar.prototype.draw.apply(this, arguments);

        var ctx = this.chart.ctx;
        ctx.save();
        ctx.lineWidth = this.scale.lineWidth;
        ctx.strokeStyle = 'white';
        ctx.beginPath();
        ctx.moveTo(this.scale.xScalePaddingLeft, this.scale.calculateY(0));
        ctx.lineTo(this.chart.width, this.scale.calculateY(0));
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
});


var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(254, 164, 0, 1)",
            strokeColor: "rgba(254, 164, 0, 1)",
            highlightFill: "rgba(254, 164, 0, 1)",
            highlightStroke: "rgba(254, 164, 0, 1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }
    ]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx).BarAlt(data, {
    scaleFontColor: '#fff',
    scaleGridLineColor: 'rgba(255, 255, 255, 0.4)',
    scaleLineColor: 'rgba(0, 0, 0, 0)',
    scaleShowVerticalLines: false
});

仅绘制没有Y轴的X轴

如果要绘制x轴而不是y轴，则必须隐藏两者并自行绘制x轴，如此

Vaadin