我手动绘制Canvas图表,如下所示:
但是,在IE8上,canvas不兼容 .
现在,我想使用HighCharts . 我发现了类似的图表
jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/
如何显示附加值(样品:76.38和93)并绘制针头?
更新:
基本上,Kacper的答案解决了原始问题 . 我只想用更好的视角来改进图表 . 针和这样的额外点的线 .
并且,当当前值达到新点时,我可以定义颜色 . 例如:[0,76.38]为红色,[76.38,93]为绿色,[93,95]为绿色 .
请教我更多 .
1 回答
您正在尝试使用两种Highcharts类型的图表的功能 - solidgauge和gauge .
可以将它们放在一个图表中,并为两个系列设置相同(或几乎相同)的值 .
示例:http://jsfiddle.net/2L1bmhb5/
更新:
停止比例,如果为0-1,那么如果您希望颜色基于轴值 - 缩放它们 .
http://jsfiddle.net/f6k9eou4/
其他方法是使用yAxis minColor和maxColor来改变颜色 . 在这种情况下,轴必须更新,并且系列必须另外与轴绑定 .
http://jsfiddle.net/2L1bmhb5/2/
http://api.highcharts.com/highcharts#series.pivot
http://api.highcharts.com/highcharts#series.dial
http://jsfiddle.net/2L1bmhb5/3/
http://jsfiddle.net/2L1bmhb5/4/
其他方法是编写Highcharts包装器,它将改变默认行为并启用每个选定刻度的设置样式 .
Finall示例:http://jsfiddle.net/2L1bmhb5/6/