Блог

могу ли я иметь график, подобный приведенному ниже, в highcharts?

Возможно что-то подобное, см.: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]
    }]

});