如何自定义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. 没有＆＃34;平均＆＃34;注释

您可以在此处查看：http://jsfiddle.net/OnaBai/sThK3/1/

Answer 2

这是一个很老的问题，但这里有一个有效的答案：

Give a Linear Gauge custom labels