Question

我正在研究仪表模块，其目的如下：

目前，我有以下模型正在运作：

（请参阅小提琴获取最新代码）

    $(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

它可能但有点棘手 - 你可以通过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/

Highcharts Gauge样式和添加CSS元素

1 个答案: