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 di atas dan di bawah nilai sifar.

Saya menggunakan versi 4.2.1

Apakah yang perlu saya lakukan?

Contoh carta menegak

var BULAN = [
      "Januari",
      "Februari",
      "Mac",
      "April",
      "Mei",
      "Jun",
      "Julai",
      "Ogos",
      "September",
      "Oktober",
      "November",
      "Disember",
    ];
    var color = Carta.helpers.color;
    var barChartData = {
      label: ["Januari", "Februari", "Mac", "April", "Mei", "Jun", "Julai"],
      set data: [
        {
          label: "Set Data 1",
          Warna latar belakang: 'rgba(255, 201, 14, 1)',
          Warna sempadan: 'rgba(255, 201, 14, 1)',
          lebar sempadan: 1,
          data: [
            10,
            20,
            30,
            40,
            50
          ],
        },
        {
          label: "Set Data 2",
          Warna latar belakang: 'rgba(255, 201, 14, 1)',
          Warna sempadan: 'rgba(255, 201, 14, 1)',
          lebar sempadan: 1,
          data: [
            -100,
            -200,
            -300,
            -400,
            -500
          ],
        },
      ],
    };

    var ctx = Carta Tekanan darah;
    Carta baharu(ctx, {
      jenis: "bar",
      data: barChartData,
      pilihan: {
        responsif: benar,
        lagenda: {
          kedudukan: "atas",
        },
        tajuk: {
          paparan: benar,
          teks: "Carta Bar Chart.js",
        },
      },
    });

Ini adalah kod saya menggunakan carta JS.

Rajah Kod Saya

Answer 1

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(/^-/, '');
                    },
                }
            }
        },
    },
});

<canvas id="chart1" style="height:500px"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"
        integrity="sha512-t41WshQCxr9T3SWH3DBZoDnAT9gfVLtQS+NKO60fdAwScoB37rXtdxT/oKe986G0BFnP4mtGzXxuYpHrMoMJLA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>