我正在使用ng-highcharts而我正在尝试创建一个可以处理负值的量表,我几乎到了那里。但是,我希望零位于顶部(换句话说,我希望图表向右旋转90度),并且出于某种原因,-200
值打印两次/重叠。我错过了什么/做错了什么?
http://jsfiddle.net/Hjdnw/2006/
这应该是理想的样子,但我想在ng-highcharts中使用相同的东西,所以我可以在我的角度应用程序中使用
答案 0 :(得分:1)
我尝试创建自己的指令而不是使用ng-highcharts,并且它按预期工作。
同时删除在配置中包装图表对象的选项对象,这可能也会产生问题
使用此配置
{
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: -200,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 200,
color: '#55BF3B' // green
}, { from: -200,
to: 0,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
}
与您的相同,只是删除了选项对象
查看这个小提琴