Highchartssolidgauge:如何禁用渐变填充
Highcharts solidgauge : How can I disable gradient fill?
我正在尝试使用Highcharts
新的solidgauge
插件。
http://jsfiddle.net/4zVU8/2/
highchart提供的源代码
仪表接受三个STEP参数,根据数据显示不同的颜色。问题是它以渐变显示颜色,我想要
1( 绿色颜色高达20%
2( 黄色高达80%和
3( 一旦数值超过80%,仪表颜色应为红色。
有可能吗?
您可以设置停止,如下所示:http://jsfiddle.net/4zVU8/5/
stops: [
[0.0, '#55BF3B'], // green
[0.2, '#55BF3B'], // green
[0.21, '#DDDF0D'], // yellow
[0.80, '#DDDF0D'], // yellow
[0.81, '#DF5353'], // red
[1, '#DF5353'] // red
]
所以,在颜色结束后立即设置新的颜色。
要获得纯色,请将minColor
和maxColor
选项设置为相同的值。要根据值设置颜色,只需在选项中进行比较:
var guageValue = 60;
var gaugeOptions = {
...
yAxis: {
minColor: guageValue >= 80 ? '#FF0000' : (guageValue >= 60 ? '#FFFF00' : '#00FF00'),
maxColor: guageValue >= 80 ? '#FF0000' : (guageValue >= 60 ? '#FFFF00' : '#00FF00'),
lineWidth: 0,
....
编辑以供评论
好吧,根据API动态地做这件事应该很容易:
var chart = Highcharts.charts[0];
var point = chart.series[0].points[0];
var color = newGuageValue >= 80 ? '#FF0000' : (newGuageValue >= 60 ? '#FFFF00' : '#00FF00');
chart.yAxis[0].update({minColor:color, maxColor:color});
point.update(newGuageValue);
但是,这打破了图表(我认为这是库中的一个错误(。
所以我能想到的最好的办法就是直接研究内部:
var chart = Highcharts.charts[0];
var point = chart.series[0].points[0];
var color = newGuageValue >= 80 ? [255,0,0,1] : (newGuageValue >= 60 ? [255,255,0,1] : [0,255,0,1]);
chart.yAxis[0].stops[0].color.rgba = color;
chart.yAxis[0].stops[1].color.rgba = color;
point.update(newGuageValue);
这是一个小提琴演示。
// change your stops ,0 and 1 set the same value
var showNumber = 100; // your random data
var tickMaxNumber = 1000; // The yAxis max value
if(showNumber <= tickMaxNumber*0.2){
gaugeOptions.yAxis[0].stops = [ // red
[0, '#EE4B4B'],
[1, '#EE4B4B']
];
}else if(showNumber <= tickMaxNumber*0.8){
gaugeOptions.yAxis[0].stops = [ // yellow
[0, '#FFC063'],
[1, '#FFC063']
];
}else{
gaugeOptions.yAxis[0].stops = [ // green
[0, '#40A276'],
[1, '#40A276']
];
}
$('#container-speed').highcharts(gaugeOptions);
相关文章:
- 如何设置html元素填充的动画
- 如何使用jquery在填充自动完成的值后使文本框只读
- 如何通过ajax刷新JSF填充的javascript变量
- 用与线条相同的颜色填充多折线图上的点
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 用我的json数据填充JQuery DataTable
- 使用 jQuery 检查所有值是否为空或已填充
- 为什么不't我的变量在我的控制器中填充后在我的视图中呈现
- 传单中圆圈的渐变填充
- 如何将渐变的底部锚定到它在 HTML5 画布中填充的容器
- 折线图上的渐变填充(高图表)
- 渐变填充和画布大小
- 渐变填充颜色和隐藏图像
- 在for循环中渐变填充空白
- SVG操纵渐变填充颜色
- RaphaelJS与rgba渐变填充
- 动态颜色填充渐变不起作用
- 通过javascript添加元素后,CSS渐变不填充容器
- Highchartssolidgauge:如何禁用渐变填充