条形图仪表高图

Question

如何获取条形图？

我需要一个这样的图表：

我从这里开始执行步骤，但是我无法正确定义停靠点。 https://www.safaribooksonline.com/library/view/learning-highcharts/9781849519083/ch04s04.html

这些是我的停留点：

 stops: [
        [0, '#ffffff'],
        [1, '#ff0000'],
        [2, '#f3f03c'],
        [3, '#FFA500'],
        [4, '#02c102']
]

请咨询。

var value = "3.0";

Highcharts.chart('barGauge', {
  chart: {
    type: 'bar',
    plotBorderWidth: 2,
    plotBackgroundColor: '#D6D6EB',
    plotBorderColor: '#D8D8D8',
    plotShadow: true,
    spacingBottom: 43,
    width: 350,
    height: 120
  },
  title: {
    text: ''
  },
  credits: {
    enabled: false
  },
  xAxis: {
    tickLength: 0
  },
  yAxis: {
    title: {
      text: null
    },
    labels: {
      y: 1
    },
    min: 0,
    max: 4,
    tickInterval: 1,
    minorTickInterval: 1,
    tickWidth: 1,
    tickLength: 8,
    minorTickLength: 5,
    minorTickWidth: 1,
    minorGridLineWidth: 0
  },
  legend: {
    enabled: false
  },
  series: [{
    borderColor: '#7070B8',
    borderRadius: 3,
    borderWidth: 1,
    color: {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 1,
        y2: 0
      },
      stops: [
        [0, '#ffffff'],
        [1, '#ff0000'],
        [2, '#f3f03c'],
        [3, '#FFA500'],
        [4, '#02c102']
      ]
    },
    pointWidth: 50,
    data: [parseInt(value)]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="barGauge"></div>

因此，如果值为1，则条形图应从0变为1，并变为红色。 因此，如果值为2，则条形图应从0变为2，并变为黄色。 因此，如果值为3，则条形图应从0变为3并变为橙色。 因此，如果值为4，则条形图应从0变为4，并变为绿色。

Answer 1

您可以创建一个zones的数组，并将特定的颜色应用于每个值范围。

  

定义一系列区域的数组。根据zoneAxis选项，可以将区域应用于气泡的X轴，Y轴或Z轴。区域定义必须相对于值升序。

const gaugeValue = 4;

Highcharts.chart('barGauge', {
  chart: {
    type: 'bar',
    height: 120
  },
  title: {
    text: ''
  },
  yAxis: {
    min: 0,
    max: 4,
    tickInterval: 1,
    title: {
      text: null
    },
  },
  legend: {
    enabled: false
  },
  series: [{
    data: [parseInt(gaugeValue)],
    zones: [{
        value: 1,
        color: '#ffffff'
      }, {
        value: 2,
        color: '#ff0000'
      },
      {
        value: 3,
        color: '#f3f03c'
      },
      {
        value: 4,
        color: '#FFA500'
      },
      {
        value: 5,
        color: '#02c102'
      }
    ]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="barGauge"></div>

---

jsfiddle