Highcharts规范样式和添加CSS元素

Highcharts Gauge styling and adding CSS elements

本文关键字：添加 CSS 元素样式范样式 Highcharts 更新时间：2023-09-26

我正在研究一个测量模块，它的目的是看起来如下:

水化规

目前，我有以下模型工作:

(请参考最新代码)

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)我可以把针的方向从顺时针转到逆时针吗?目前，我已经反转了y轴，所以图形按照它应该的方式工作，但它反直觉地从高位开始并从那里继续前进(所以如果我的图表从0-100开始，我的数据值是10，它将从100开始，默认情况下到10)。

3)最后，我是否有办法添加基于结果变化的动态文本?

这是可能的，但有点棘手-你可以修改SVG的路径之前，它的渲染器通过修改Axis.getPlotBandPath方法。请参阅下面的演示。

你可以简单地禁用初始动画并设置value = 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/