条形图仪表 Highcharts答案

【问题标题】：Bar Chart Gauge Highcharts条形图仪表 Highcharts
【发布时间】：2018-09-27 02:28:13
【问题描述】：

如何实现条形图？

我需要这样的图表：

我按照此处的步骤操作，但无法正确定义停靠点。 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 并且是绿色的。

【问题讨论】：

标签： javascript highcharts

【解决方案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

【讨论】：