javascript - 如何自定义仪表控件？

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

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

给一个线性仪表自定义标签