web-dev-qa-db-ja.com

チャートjsで最小ステップサイズを設定する

Chart.js 2.0バージョンを使用してグラフを描画しています。最小ステップサイズを棒グラフで定義したい

var myNewChart = new Chart(grapharea, {
                type: 'bar',
                data: barData,
                options: {
                    responsive: true,                        
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    min: 0, // it is for ignoring negative step.
                                    beginAtZero: true,
                                    stepSize: 1  // if i use this it always set it '1', which look very awkward if it have high value  e.g. '100'.
                                }
                            }
                        ]
                    }
                }
            });

今回は私が使用しています

stepSize：1

このステップサイズを使用してポイント値を無視します。 「0.5」、最大グラフ値が「2」未満の場合に表示されます。
これを使用すると、ステップを常に「1」に設定します。 「100」。

私はそのようなことを探しています：suggestedMin = 1

高い値の場合に修正すべきではない最小ステップサイズを定義するものはありますか。

graphchart.js
22
Uzair Xlade

ポイント値（0.5など）のラベルを表示したくない場合は、stepSizeを使用する代わりに、コールバック関数を作成してポイント値のラベルをフィルター処理できます。

このような：

ticks: {
    min: 0, // it is for ignoring negative step.
    beginAtZero: true,
    callback: function(value, index, values) {
        if (Math.floor(value) === value) {
            return value;
        }
    }
}

ここで作業フィドル： https://jsfiddle.net/ma7h611L/

更新：

Atta H。 および Lekoaf で示されているように、Chart.jsはticksにprecisionプロパティを追加しました。バージョン2.7.3以降で使用可能です。 Lekoafの answer の使用方法をご覧ください。

46
Daantie
ticks: {
    precision: 0
}

これは上記のコールバック関数と同じように機能し、はるかにきれいです。

精度。定義されていて、stepSizeが指定されていない場合、ステップサイズは小数点以下の桁数に丸められます。

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

4
Lekoaf