Question

我无法弄清楚如何获得y轴（或者它可能只是一个网格线），以显示使用chart.js。这是图表的截图：

Chart.js screenshot with missing gridline/axis at y=0

我试图在这个网站上研究这个问题，但找不到任何有用的东西。如果有什么我可能错过的请告诉我！我感谢任何帮助。

这是我的代码：

$.ajax({
method: "GET",
url: endpoint,
success: function(data){
    labels = data.labels
    defaultData = data.default
    sp500roidca = data.sp500dca
    console.log(data)
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'line',        
        data: {
            labels: labels,
            datasets: [{
                label: 'ROI (%)',
                data: defaultData,
                borderColor: 'white',       
            },
            {
                label: 'DCA SP500 ROI (%)',
                data: sp500roidca,
                borderColor: '#00EE76',
            }],       
        },
        options:{    
            elements:{
                point:{
                    radius: 1
                }
            },
            scales: {
                yAxes: [{
                    display: true,
                    gridLines: {
                        color: 'gray'
                    }
                }],
                xAxes: [{
                    display: true,
                    gridLines: {
                        color: 'gray',
                    }
                }]
            },            

            legend: {
                position: 'top',
                labels: {
                    fontColor: 'white'
                }
            },  
        }
    })

Answer 1

事实证明黑色背景隐藏了零轴颜色。我通过添加zeroLineColor来修复它：＆＃39;白色＆＃39; yAxes下的比例下的选项如此：

scales: {
                yAxes: [{
                    display: true,
                    gridLines: {
                        color: 'gray',
                        zeroLineColor: 'white'
                    }
                }],

y = 0网格线（或轴？）未显示在chart.js

1 个答案: