條形圖儀表 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>

---

提琴手