Как достичь диаграммы бар-диаграммы?
Мне нужна диаграмма:
Я выполнил шаги отсюда, но я не могу правильно определить упоры. 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 и быть зеленой.
Вы можете создать массив зон и применить определенный цвет к каждому диапазону значений.
Массив, определяющий зоны внутри серии. Зоны могут быть применены к оси X, оси Y или оси Z для пузырьков в соответствии с опцией zoneAxis. Определения зон должны быть в порядке возрастания относительно значения.
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>