与梯度的活动量表高图 [英] Activity gauge High Chart with Gradient

问题描述

我想在下面的图表中使用渐变。

请帮助我解决这个问题。

谢谢提前。

 链接：http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software /highcharts.com/tree/master/samples/highcharts/demo/gauge-activity/ 
  

解决方案

您应该可以使用小技巧为您的角度测量仪添加渐变。您可以使用yAxis.stops为图表添加颜色渐变：

  yAxis：{
 min：0，
 max：100，
 lineWidth：0，
 tickPositions：[]，
 stops：[
 [0.1，'＃55BF3B']，// green 
 [0.5，'＃DDDF0D']，//黄色
 [0.9，'＃DF5353'] //红色
]，
}，
  

然后，您可以在轴线min和您的值之间添加点，因此它们将根据点值具有不同的颜色。

 函数（图表）{
 var y = this.series [0] .data [0] .y; 
 for（var i = y; i> = 0; i = i  - （y / 80））{
 chart.addSeries（{
 data：[{
y： i，
 radius：'100％'，
 innerRadius：'100％'，
}]，
 stickyTracking：false，
 enableMouseTracking：false 
 }，false）
} 
 chart.redraw（）; 
 Highcharts.each（chart.series，function（s）{
 s.update（{
 borderColor：s.data [0] .color 
}，false）; 
}）; 
 chart.redraw（）; 
 
 
 
 
 
 $ b 
在这里你可以找到一个例子：
 < a href =http://jsfiddle.net/5ajoegb9/1/ =nofollow> http://jsfiddle.net/5ajoegb9/1/   
I want to use gradient in below chart.


Please help me on this concern.

Thanks in advance.
  Link : http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-activity/


解决方案
You should be able to use small trick for adding gradient to your angular gauge. You can use yAxis.stops for adding color gradients to your chart: 
yAxis: {
  min: 0,
  max: 100,
  lineWidth: 0,
  tickPositions: [],
  stops: [
    [0.1, '#55BF3B'], // green
    [0.5, '#DDDF0D'], // yellow
    [0.9, '#DF5353'] // red
  ],
},
Then you can add points between your axis min and your value, so they will have different colors depending on points value. 
function(chart) {
    var y = this.series[0].data[0].y;
    for (var i = y; i >= 0; i = i - (y / 80)) {
      chart.addSeries({
        data: [{
          y: i,
          radius: '100%',
          innerRadius: '100%',
        }],
        stickyTracking: false,
        enableMouseTracking: false
      }, false)
    }
    chart.redraw();
    Highcharts.each(chart.series, function(s) {
      s.update({
        borderColor: s.data[0].color
      }, false);
    });
    chart.redraw();
  }
Here you can find an example how it can work:
http://jsfiddle.net/5ajoegb9/1/

                        
这篇关于与梯度的活动量表高图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！