使用Highcharts构建仪表图表

Question

我可以在highcharts中找到如下图表吗？

Answer 1

这样的事情是可能的，请参阅：http://jsfiddle.net/VL76x/2/

一般的想法是使用plotBands标记仪表上的空间，然后只需调整类别和值即可显示图表。完整代码：

$('#container').highcharts({

    chart: {
        type: 'gauge'
    },

    pane: {
        startAngle: -90,
        endAngle: 90,
        background: null
    },

    yAxis: {
        min: 0,
        max: 4,
        tickLength: 0,
        categories: ['good', 'bad', 'ugly', 'one'],
        tickPositions: [0.5, 1.5, 2.5, 3.5],
        labels: {
            rotation: 'none',
            formatter: function() {
                return this.axis.categories[this.value - 0.5];
            }
        },
        plotBands: [{
            from: 0,
            outerRadius: '100%',
            innerRadius: '1%',
            to: 1,
            color: '#55BF3B' // green
        }, {
            from: 1,
            to: 2,
            outerRadius: '100%',
            innerRadius: '1%',
            color: '#DDDF0D' // yellow
        }, {
            from: 2,
            to: 3,
            outerRadius: '100%',
            innerRadius: '1%',
            color: '#DF5353' // red
        }, {
            from: 3,
            to: 4,
            outerRadius: '100%',
            innerRadius: '1%',
            color: 'rgba(0,0,255, 0.5)' // blue
        }]        
    },

    series: [{
        data: [1.5]
    }]

});