Gauge chart图表问题的高图尺寸

时间:2016-03-31 07:28:28

标签: javascript css highcharts

对于图表的大小,我面临一个奇怪的问题。

我想要像这样的条带大小。

enter image description here

然而,我是这样的。

enter image description here

你可以在下面看到我的努力。

chart: {
                type: 'gauge',
                alignTicks: false,
                height: 330,
                width: 160
            },

            title: null,
            pane: {
                startAngle: -90,
                endAngle: 90,
                size: '90%',
                background: [{
                    backgroundColor: '#fff',
                    borderWidth: 0
                }]
            },
            yAxis: {
                min: 0,
                max: 100,
                tickPosition: 'inside',
                tickColor: '#666',
                tickLength: 10,
                tickWidth: 0,
                minorTickWidth: 3,
                minorTickColor: '#fff',
                minorTickPosition: 'inside',
                minorTickLength: 0,
                minorTickInterval: null,
                offset: -10,
                lineWidth: 0,
                labels: {
                    enabled: false
                },
                endOnTick: false
            }

我们将不胜感激。

1 个答案:

答案 0 :(得分:1)

如果我理解你的问题:在量表图表中宽度为'条带的由每个plotBand的选项thickness确定。

enter image description here

plotBands: [{
            from: 0,
            to: 20,
            thickness: 40,
            color: '#55BF3B' // green
        }, {
            from: 20,
            to: 60,
            thickness: 40,
            color: '#DDDF0D' // yellow
        }, {
            from: 60,
            to: 100,
            thickness: 40,
            color: '#DF5353' // red
        }]

有关示例,请参阅http://jsfiddle.net/doc_snyder/zd9mshm7/