如何在ChartJs上隱藏第一個Y軸刻度線？

Question

我的第一個刻度線弄亂了圖表底部的填充。 有什么辦法告訴ChartJS隱藏第一個Y軸刻度線/標簽？

根據我的其他研究，有一個名為afterBuildTicks的函數，您可以定義該函數以使用刻度線進行操作，但是我不確定這種方法。

是否有人對如何始終刪除第一個刻度線有任何想法？

JS

var ctx = document.getElementById("myChart").getContext("2d");

    // Create gradient
    grd = ctx.createLinearGradient(170.000, 600.000, 150.000, 0.000);

    // Add colors
    grd.addColorStop(0.000, 'rgba(0, 255, 0, 1.000)');
    grd.addColorStop(0.200, 'rgba(191, 255, 0, 1.000)');
    grd.addColorStop(0.400, 'rgba(221, 255, 0, 1.000)');
    grd.addColorStop(0.600, 'rgba(255, 229, 0, 1.000)');
    grd.addColorStop(0.800, 'rgba(255, 144, 0, 1.000)');
    grd.addColorStop(1.000, 'rgba(255, 50, 0, 1.000)');




    var data = {
        labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"],
        datasets: [
            {
                lineTension: 0.1,
                backgroundColor: grd,
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [0, 100, 250, 400, 400, 400, 500, 700, 900, 1000, 1000, 1300, 1300, 1100, 900, 700, 500, 300, 100, 0],
                spanGaps: false,
            }
        ]
    };


    var myChart = new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
            legend: {
              display: false
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true,
                        callback: function(value, index, values) {
                                return value + '°';
                        },
                        mirror: true,
                    },
                    gridLines: {
                        display: false,
                        drawBorder: false,

                    },
                }],
                xAxes: [{
                    display: false,
                    gridLines: {
                        display: false
                    }
                }]
            },

        },
    });

的HTML

<div style="height: 600px; width:600px; border: 2px solid blue; margin-left: 10px">
        <canvas id="myChart" width="400" height="400"></canvas>
    </div>

Answer 1

我需要查看軸的標記和刻度線，以便更具體，但是您想要執行以下操作：

.ticks:first-of-type {
    display: none;
}

其中.ticks是tick元素的類名稱。