1. ホーム
  2. javascript

chartJSでy軸の小数点をスキップする

2023-07-19 02:14:05

質問

私は この ライブラリを使っています。問題は、Y軸に小数点があることです。以下の画像で見ることができます。

数字だけに制限する方法はありますか?

これは私のコードです。

var matches = $("#matches").get(0).getContext("2d");

var data = {
        labels: labelsFromCurrentDateTillLastWeek,
        datasets: [
            {
                label: "Last Weeks Matches",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: result
            }
        ]
    };

    var options = {
        scaleLabel: function (label) {
            return Math.round(label.value);
        }
    };

    var myLineChart = new Chart(matches, {
        type: 'bar',
        data: data,
        options: options

    })

どのように解決するのですか?

更新しました。 からの更新された回答をご覧ください。 @DreamTeK の更新された回答を参照してください。 https://stackoverflow.com/a/54006487/2737978


chartjs 2.xでは、オプションで userCallback のオプションを渡すことができます。この場合、ラベルが整数であるかどうかをチェックすることができます。

以下はその例です。

 options = {
     scales: {
         yAxes: [{
             ticks: {
                 beginAtZero: true,
                 userCallback: function(label, index, labels) {
                     // when the floored value is the same as the value we have a whole number
                     if (Math.floor(label) === label) {
                         return label;
                     }

                 },
             }
         }],
     },
 }

フィドルの例