Highcharts Gauge樣式和添加CSS元素

Question

我正在設計一個量規模塊，其外觀如下：

水化儀

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

（有關最新代碼，請參閱小提琴）

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）最后，我有什么方法可以添加根據結果更改的動態文本？

Answer 1

1. 可能但有些棘手-您可以通過修改Axis.getPlotBandPath方法在SVG渲染器之前修改其路徑。 請參閱下面的演示。

2. 您可以簡單地禁用初始動畫並設置值=0。然后在回調中，將點更新為正確的值：

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

   和回調：

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

3. 使用Renderer.text沒問題。 例如：

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

   然后更新文本：

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

這是一個有效的演示： http : //jsfiddle.net/8p8ab8bg/