javascript - 不等间隔 Highcharts 仪表

Question

我正在使用 HighChart 的 Angular Gauge，想知道是否可以有不等的间隔。目前，Y 轴上的不等间隔会影响仪表中每个绘图带的大小。如何才能在 Y 轴上具有相等的绘图带大小和不等间隔。

以下是间隔 0-86、86-88、88-90、90-96 和 96-100 的示例。

到目前为止我已经尝试过了-

$(function() {

  $('#container').highcharts({
    chart: {
      type: 'gauge',
      plotBackgroundColor: null,
      plotBackgroundImage: null,
      plotBorderWidth: 0,
      plotShadow: false
    },
    credits: {
      enabled: false
    },
    title: {
      text: 'Percentage %'
    },

    pane: {
      center: ['50%', '85%'],
      size: '130%',
      startAngle: -90,
      endAngle: 90,
      background: {
        backgroundColor: '#EEE',
        innerRadius: '80%',
        outerRadius: '100%',
        shape: 'arc'
      }
    },
    exporting: {
      enabled: false
    },
    tooltip: {
      enabled: false
    },
    // the value axis
    yAxis: [{
      min: 0,
      max: 100,
      minorTickInterval: 'auto',
      minorTickWidth: 0,
      minorTickLength: 10,
      minorTickPosition: 'outside',
      minorTickColor: '#666',
      tickPixelInterval: 50,
      tickInterval: 6,
      tickWidth: 2,
      tickPosition: 'outside',
      tickLength: 10,
      tickColor: '#666',
      labels: {
        step: 1,
        distance: 20,
        rotation: 'auto',
        style: {
          fontSize: '15px'
        }
      },
      title: {
        text: ''
      },
      plotBands: [{
        from: 0,
        to: 86,
        color: '#bf0000',
        innerRadius: '60%',
        outerRadius: '100%'
      }, {
        from: 86,
        to: 88,
        innerRadius: '60%',
        outerRadius: '100%',
        color: '#fcfe00'
      }, {
        from: 88,
        to: 90,
        innerRadius: '60%',
        outerRadius: '100%',
        color: '#00ae50'
      }, {
        from: 90,
        to: 96,
        innerRadius: '60%',
        outerRadius: '100%',
        color: '#2f74b4'
      }, {
        from: 96,
        to: 100,
        innerRadius: '60%',
        outerRadius: '100%',
        color: '#7131a0'
      }]
    }],
    plotOptions: {
      gauge: {
        dial: {
          backgroundColor: "silver",
          baseLength: "80%",
          baseWidth: 4,
          borderColor: "grey",
          borderWidth: 1,
          radius: "90%",
          rearLength: "0",
          topWidth: 1
        },
        pivot: {
          backgroundColor: "silver",
          borderColor: "grey",
          borderWidth: 1,
          radius: 5
        },
        dataLabels: {
          y: 3,
          style: {
            fontSize: "15px"
          },
          borderWidth: 0,
          useHTML: false
        }
      }
    },
    series: [{
      name: 'Speed',
      data: [90],
      tooltip: {
        valueSuffix: ''
      }
    }]

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>


<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

感谢任何帮助!

Answer 1

好吧，根据您的要求，您似乎想要实现与此类似的目标..

其中最小值和最大值应相应更新。

解决方案-

据我了解，您希望将所有红色值设置为低于 86%。正确的？那么为什么不改变图表的最小值呢？我的意思是，在将值传递给图表时，相应地操作您的输入数据并将相应的标签传递给它。

希望这对您有帮助:)