Activity 用渐变测量最高图表

Question

我想在下图中使用渐变。

请帮我解决这个问题。

提前致谢。

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

Answer 1

您应该能够使用小技巧为 angular 仪表添加渐变。您可以使用 yAxis.stops 为图表添加颜色渐变：

yAxis: {
  min: 0,
  max: 100,
  lineWidth: 0,
  tickPositions: [],
  stops: [
    [0.1, '#55BF3B'], // green
    [0.5, '#DDDF0D'], // yellow
    [0.9, '#DF5353'] // red
  ],
},

然后你可以在你的轴最小值和你的值之间添加点，所以它们会根据点值有不同的颜色。

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();
  }

您可以在此处找到它如何工作的示例： http://jsfiddle.net/5ajoegb9/1/

Activity 用渐变测量最高图表

Activity gauge High Chart with Gradient

javascript

jquery

highcharts

gradient

gauge