高图表计量固体和不同的数据集

Question

我正在使用High charts gauge-solid。所以我需要创建如下图表。 你能告诉我如何为这个图表提供不同的data sets（每种颜色都有自己的数据）吗？

我需要的是：

这就是我尝试过的：jsfiddle

$(function () {

    $('#gauge').highcharts({

        chart: {
            type: 'solidgauge',
            backgroundColor: 'transparent'
        },

        title: null,

        pane: {
            center: ['50%', '70%'],
            size: '130%',
            startAngle: -120,
            endAngle: 120,
            background: {
                backgroundColor: '#fff',
                innerRadius: '75%',
                outerRadius: '100%',
                shape: 'arc',
                borderColor: 'transparent'
            }
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        yAxis: {
            min: 0,
            max: 100,
            stops: [
                [0.1, '#e74c3c'], // red
                [0.5, '#f1c40f'], // yellow
                [0.9, '#2ecc71'] // green
                ],
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            gridLineWidth: 0,
            gridLineColor: 'transparent',
            labels: {
                enabled: false
            },
            title: {
                enabled: false
            }
        },

        credits: {
            enabled: false
        },

        plotOptions: {
            solidgauge: {
                innerRadius: '75%',
                dataLabels: {
                    y: -45,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        },

        series: [{
            data: [83],
            dataLabels: {
                format: '<p style="text-align:center;">{y}%</p>'
            }
        }]
    });

});

Answer 1

data数组可以包含一个系列的多个值：

series: [{
    data: [80, 150, 200]
}]

现场演示：http://jsfiddle.net/kkulig/tou6wwxj/

如果您希望每个刻度盘仅在其自己的范围内移动，那么您可以在初始化或更新时确保为某个点指定了正确的值。