javascript - y=0 网格线(或轴？)未显示在 chart.js 中

Question

我不知道如何使用 chart.js 显示 y 轴(或者可能只是一条网格线)。这是图表的屏幕截图:

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

事实证明，黑色背景隐藏了零轴颜色。我通过在 yAxes 下的 scales 下添加 zeroLineColor: 'white' 选项来修复它，如下所示:

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