javascript - Highcharts Gauge样式和添加CSS元素

我正在设计一个量规模块，其外观如下：

Hydration Guage

目前，我正在使用以下模型：

（有关最新代码，请参阅小提琴）

GaugeFiddle

    $(function() {

  var chart = new Highcharts.Chart({

    chart: {
      renderTo: 'container',
      type: 'gauge'
    },
    title: {
      text: 'Hydration Index'
    },

    pane: {
      startAngle: -140,
      endAngle: 140,
      size: 200,
      background: {
        backgroundColor: {
          linearGradient: [0, 300, 300, 300],
          stops: [
            [0, 'rgb(152, 230, 230)'],
            [1, 'rgb(0, 0, 10)']
          ]
        },
        innerRadius: '70%',
        outerRadius: '100%',
        shape: 'arc',
      }
    },


    yAxis: {
        reversed: true,
      min: 0,
      max: 100,
      plotBands: [{ // mark the weekend
      }],
      tickInterval: 600
    },


    plotOptions: {

      gauge: {
        dataLabels: {
          enabled: false
        },

        dial: {
          radius: '100%',
          backgroundColor: 'black',
          borderColor: 'white',
          borderWidth: 0.5,
          rearLength: 0,
          baseWidth: 10,
          topWidth: 1,
          baseLength: '0%'
        },
        pivot: {
          radius: 0
        }
      },

    },


    series: [{
      name: 'Hydration percent',
      data: [20],
    }],

    credits: {
      enabled: false
    },
  });

});

1）如何将那些弯曲的边缘仅添加到量规的一侧？

2）我可以将针的方向从顺时针方向逆转吗？目前，我将yaxis颠倒了，所以该图按预期的方式工作了，但是反直觉地从高点开始，然后从那里开始（因此，如果我的图表从0-100开始，而我的数据值为10，则它将开始为100，默认情况下为10）。

3）最后，我有什么方法可以添加根据结果更改的动态文本？

最佳答案

可能但有些棘手-您可以通过modyfying Axis.getPlotBandPath方法在SVG渲染器之前修改其路径。请参阅下面的演示。
您可以简单地禁用初始动画并设置值=0。然后在回调中，将点更新为正确的值：

series: [{
  name: 'Hydration percent',
  animation: false,
  data: [
    0
  ]
}],

和回调：

function(chart) { // on complete
  chart.series[0].points[0].update(80);
  ...
}

使用Renderer.text没问题。例如：

chart.myLabel = chart.renderer.text('Test', 10, 10).add(); // store in some variable

然后更新文本：

chart.myLabel.attr({
  text: 'Nice!'
});

这是一个工作示例：http://jsfiddle.net/8p8ab8bg/