如何在圖 j 中將 Y-axis 值從實數更改為整數？

問題描述

我有一個圖表，我想在我的網站使用 Chart.js 。在 Y-axis 中，它給出了實數而不是整數，這就是我想要的，這裡是我現在所看到的圖片：

那就是程式碼：

    var lineChartData = {

        labels : ["2013/04/01","2013/03/31", "2013/03/30", "2013/03/29", "2013/03/28","2013/03/27", "2013/03/26"],

        datasets : [
            {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                data : ["0", "2","1", "0", "1","0","1"]
            }
        ]

    }

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(lineChartData);

最佳解決辦法

嘗試這樣，max 是資料的最高值。

var steps = 3;
new Chart(ctx).Bar(plotData, {
    scaleOverride: true,
    scaleSteps: steps,
    scaleStepWidth: Math.ceil(max / steps),
    scaleStartValue: 0
});

次佳解決辦法

我以新的方式處理它：

new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          callback: function(value) {if (value % 1 === 0) {return value;}}
        }
      }]
    }
  }
});

第三種解決辦法

在使用新版本 2 的 Chart.js 時，我無法獲得現有的答案，因此我在 V2 中找到了解決這個問題的方法：

new Chart(ctx, {type: 'bar', data: barChartData,
  options:{ 
    scales: {
      yAxes: [{
        ticks: {
          stepSize: 1
        }
      }]
    }
  }
});

第四種辦法

如果您希望以不同於零的數字開始，您必須考慮到：

var step  = 5;
var max   = 90
var start = 40;
new Chart(income).Bar(barData, {
scaleOverride: true,
scaleSteps: Math.ceil((max-start)/step),
scaleStepWidth: step,
scaleStartValue: start
});

第五種辦法

檢查 Chart.js 檔案，在全域性配置部分：

// Boolean – Whether the scale should stick to integers, not floats even if drawing space is there scaleIntegersOnly: true,

希望它有幫助。

參考文獻

• how to change the Y-axis values from real numbers to integer in chartjs?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。