javascript - Gauge コントロールをカスタマイズする方法は?

Question

ラジアルゲージコントロールを見て、針を抜いたら下の写真のように出来ないかな？

Answer 1

あなたはかなり近づくことができます：

$("#gauge").kendoRadialGauge({
    pointer: {
        // Current value
        value: 0.72
    },
    scale: {
        // Start and End angle of the Gauge
        startAngle: 0,
        endAngle: 180,

        // Make range wider and with units inside
        rangeSize: 40,
        rangeDistance: -10,

        // Configure major and minor unit
        minorUnit: 0.05,
        majorUnit: 0.25,
        // Make major ticks same size than minor ticks
        majorTicks: {
            size: 10
        },

        // Define min and max (0% - 100%)
        min: 0,
        max: 1,

        // Labels outside the range and number as percentage with no decimals
        labels: {
            position: "outside",
            format: "p0"
        },

        // Color ranges
        ranges: [
            {
                from: 0,
                to: 0.45,
                color: "red"
            }, 
            {
                from: 0.45,
                to: 0.80,
                color: "yellow"
            },
            {
                from: 0.80,
                to: 1.00,
                color: "green"
            }
        ]
    }
});

いくつかの違いは次のとおりです。

1. ポインターは塗りつぶされています。色は設定できますが、境界線は設定できません。
2. 「平均」の注釈はありません。

ここで見ることができます：http://jsfiddle.net/OnaBai/sThK3/1/

Answer 2

これはかなり古い質問ですが、ここに実用的な答えがあります：

Linear Gauge にカスタム ラベルを付ける