条形图仪表 Highcharts

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

您可以创建一组区域并将特定颜色应用于每个值范围。

定义系列内区域的数组。 根据 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>

---

提琴手