css - 具有渐变绿-黄-红的仪表图

Question

我正在尝试实现一个仪表图，该仪表图将具有基于其已满百分比的渐变，类似于下图。我能做到的最接近的是显示所有渐变颜色，而不考虑值 - 比如 here .

    var x = 80; // Change x to see effects.

有没有人设法获得基于值的梯度？

Answer 1

您可以使用 yAxis 停止点并制作一些小技巧，向您的图表添加渐变。例如，您可以将点添加到您的仪表(在您的加载事件回调函数内)，其值从您的正常 y 值减少到 0。这将使您有机会获得类似于具有多个点的渐变的东西。

function(chart) {
    var y = this.series[0].data[0].y;
    for (var i = y; i >= 0; i = i - 1) {
      chart.addSeries({
        data: [i],
        stickyTracking: false,
        enableMouseTracking: false
      }, false)
    }
    chart.redraw();
  }

在这里您可以看到它如何工作的示例:http://jsfiddle.net/64mfcg3v/6/

亲切的问候，