Bagaimana untuk menetapkan nilai paksi y dalam carta bar menegak menggunakan carta JS

Question

Dalam carta bar menegak ini, paksi-y mempunyai nilai positif dan negatif. Saya mahu menggunakan integer positif ke atas dan ke bawah berdasarkan nilai sifar. Saya menggunakan versi 4.2.1 apakah yang perlu saya lakukan? Contoh carta menegak varMONTHS=["Januari","Februari","Mac","April","Mei","Jun","Julai","

P粉316110779 · Answer

Jika anda hanya mahu menukar teks label paksi-y, anda boleh menukarnya sepenuhnya dengan menetapkan fungsi options.scales.y.ticks.callback, lihat Dokumentasi dan Rujukan API untuk butiran. Dalam kes anda, untuk menjadikan nilai negatif dibaca sebagai positif, anda boleh menggunakan:

callback: function(val){
    return this.getLabelForValue(Math.abs(val));
}

atau

callback: function(val){
    return this.getLabelForValue(val).replace(/^-/, '');
}

var ctx = document.getElementById('chart1');
var MONTHS = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
];

var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "Dataset 1",
            backgroundColor: 'rgba(255, 201, 14, 1)',
            borderColor: 'rgba(255, 201, 14, 1)',
            borderWidth: 1,
            data: [
                10,
                20,
                30,
                40,
                50
            ],
        },
        {
            label: "Dataset 2",
            backgroundColor: 'rgba(255, 201, 14, 1)',
            borderColor: 'rgba(255, 201, 14, 1)',
            borderWidth: 1,
            data: [
                -100,
                -200,
                -300,
                -400,
                -500
            ],
        },
    ],
};

new Chart(ctx, {
    type: "bar",
    data: barChartData,
    options: {
        responsive: true,
        legend: {
            position: "top",
        },
        title: {
            display: true,
            text: "Chart.js Bar Chart",
        },
        scales:{
            y: {
                ticks: {
                    callback: function(val){
                        return this.getLabelForValue(Math.abs(val));
                        // or: //return this.getLabelForValue(val).replace(/^-/, '');
                    },
                }
            }
        },
    },
});