2

最小値が 50、最大値が 100、渡される値が 75 になるように、C3 ゲージ チャートのスケーリングを調整しようとしています。私のメンタル モデルでは、円弧が左側から移動するはずです。ゲージの途中 (50 ～ 75)。しかし、代わりに円弧が中央に表示され、計算された値は 50? 75 は 50 ～ 100 の中間であるため、値は 50 であると想定していますが、円弧を正しく表示する方法がわかりません。

http://jsfiddle.net/8o4mqjf4/

円弧は左からちょうど真ん中まで行くべきだと思います。

var chart = c3.generate({
    bindto: "#gauge",
    data: {
        columns: [
            ['data', 75.0]
        ],
        type: 'gauge',
    },
    gauge: {
        min: 50,
        max: 100
    },
    color: {

    }
});
4

1 に答える 1

0

あなたのメンタルモデルは正しいです。デフォルトでは比率が表示されるため、ゲージは期待どおりに表示されません。代わりに、ラベルとフォーマットのオプションを使用して値を表示します。

var chart = c3.generate({
    bindto: "#gauge",
    data: {
        columns: [
            ['data', 75.0]
        ],
        type: 'gauge',
    },
    gauge: {
        label: {
            format: function(value, ratio) {
                return value;
            }
        },
        min: 50,
        max: 100
    },
    color: {

    }
});
于 2014-11-04T11:10:38.870 に答える