如何使用圖表JS在垂直長條圖中設定y軸值

Question

在此垂直長條圖中，y 軸有正值、負值。

我想根據零值上下使用正整數。

我用的是4.2.1版

我該怎麼辦？

垂直圖表範例

var MONTHS = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December",
    ];
    var color = Chart.helpers.color;
    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
          ],
        },
      ],
    };

    var ctx = bloodPressureChart;
    new Chart(ctx, {
      type: "bar",
      data: barChartData,
      options: {
        responsive: true,
        legend: {
          position: "top",
        },
        title: {
          display: true,
          text: "Chart.js Bar Chart",
        },
      },
    });

這是我使用圖表 JS 的程式碼。

我的程式碼圖表

Answer 1

如果您只想更改y 軸標籤的文本，可以透過設定函數options.scales.y.ticks.callback 來完全更改它們，請參閱文件 和API 參考以了解詳細資訊。在您的情況下，要使負值讀為正值，您可以使用：

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

或

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>