Я работаю над линейным графиком Highcharts, где мне нужно добавить пороги с конкретными диапазонами по оси x. Я хочу, чтобы определённые области графика были окрашены в зависимости от этих порогов. Вот детали моей проблемы: Я использовал параметры настройки зон в Highcharts, чтобы попытаться реализовать это, но не получаю желаемых результатов. Вот код, который я использовал до сих пор:
Пороги:
Порог 1:
Значение: 10°C
Диапазон: от 100 метров до 500 метров (по оси x)
Порог 2:
Значение: 20°C
Диапазон: от 600 метров до 2682 метров (по оси x)
Я хочу:
Закрасить область между 100 метрами и 500 метрами в красный цвет, если температура выше 10°C.
Закрасить область между 600 метрами и 2682 метрами в красный цвет, если температура выше 20°C.
Отобразить пунктирные линии на порогах 10°C и 20°C.
Highcharts.chart('container', {
title: {
text: 'Термальный профиль'
},
series: [
{
name: 'Температура 0-10°C',
data: [
[0, 20.18], [1, 20.21], [2, 20.38], /* ... */ [99, 19.95] // Данные отфильтрованы для температур ниже 10°C
],
color: '#83c081', // Цвет для температур < 10°C
zones: [
{
value: 10,
color: '#83c081'
}
]
},
{
name: 'Температура 10-20°C',
data: [
[100, 10.5], [101, 11.2], /* ... */ [499, 19.8] // Данные отфильтрованы для температур между 10°C и 20°C
],
color: '#dc0059', // Цвет для температур > 10°C и < 20°C
zones: [
{
value: 20,
color: '#dc0059'
}
]
},
{
name: 'Температура 20-30°C',
data: [
[600, 21.5], [601, 22.0], /* ... */ [2682, 27.5] // Данные отфильтрованы для температур между 20°C и 30°C
],
color: '#83c081', // Цвет для температур > 20°C
zones: [
{
color: '#83c081'
}
]
}
],
xAxis: {
title: {
text: 'Расстояние (м)'
},
categories: ["0", "550", "1100", "1650", "2150", "2682"]
},
yAxis: {
title: {
text: 'Температура (°C)'
},
plotLines: [
{
color: '#dc0059',
dashStyle: 'Dash', // Пунктирная линия
value: 10, // Порог на 10°C
width: 2,
label: {
text: 'Порог 10°C',
align: 'right'
}
},
{
color: '#dc0059',
dashStyle: 'Dash', // Пунктирная линия
value: 20, // Порог на 20°C
width: 2,
label: {
text: 'Порог 20°C',
align: 'right'
}
}
]
},
tooltip: {
headerFormat: '<b>{point.x} м</b><br>',
pointFormat: 'Температура: {point.y} °C'
}
});
Ответ
Для добавления пороговых значений с определенными диапазонами на график Highcharts, можно воспользоваться настройками зон и заливками, чтобы изменить цвет определенных областей графика в зависимости от температуры. Давайте исправим ваш код, чтобы добиться желаемых результатов.
Вот обновленный код:
Highcharts.chart('container', {
title: {
text: 'Тепловой профиль'
},
series: [
{
name: 'Температура 0-10°C',
data: [
[0, 20.18], [1, 20.21], [2, 20.38], /* ... */ [99, 19.95] // Данные с температурами ниже 10°C
],
color: '#83c081', // Цвет для температур < 10°C
zones: [
{
value: 10,
color: '#83c081'
}
]
},
{
name: 'Температура 10-20°C',
data: [
[100, 10.5], [101, 11.2], /* ... */ [499, 19.8] // Данные с температурами между 10°C и 20°C
],
color: '#dc0059', // Цвет для температур > 10°C и < 20°C
zones: [
{
value: 20,
color: '#dc0059' // Температуры, между 10°C и 20°C
}
]
},
{
name: 'Температура 20-30°C',
data: [
[600, 21.5], [601, 22.0], /* ... */ [2682, 27.5] // Данные с температурами между 20°C и 30°C
],
color: '#83c081', // Цвет для температур > 20°C
zones: [
{
color: '#83c081'
}
]
}
],
xAxis: {
title: {
text: 'Расстояние (м)'
},
// Используйте 'min' и 'max', чтобы установить пределы оси, если нужно
min: 0,
max: 3000,
plotLines: [{
value: 100,
color: '#dc0059',
width: 2,
dashStyle: 'Dash',
label: {
text: 'Порог 10°C',
align: 'left'
}
}, {
value: 600,
color: '#dc0059',
width: 2,
dashStyle: 'Dash',
label: {
text: 'Порог 20°C',
align: 'left'
}
}]
},
yAxis: {
title: {
text: 'Температура (°C)'
},
plotLines: [
{
color: '#dc0059',
dashStyle: 'Dash', // Пунктирная линия
value: 10, // Порог на 10°C
width: 2,
label: {
text: 'Порог 10°C',
align: 'right'
}
},
{
color: '#dc0059',
dashStyle: 'Dash', // Пунктирная линия
value: 20, // Порог на 20°C
width: 2,
label: {
text: 'Порог 20°C',
align: 'right'
}
}
]
},
tooltip: {
headerFormat: '<b>{point.x} м</b><br>',
pointFormat: 'Температура: {point.y} °C'
}
});Объяснение изменений:
-
Настройка зон: Убедитесь, что секции данные (data) соответствуют вашим порогам и правильно окрашены в зависимости от температуры. Используйте
zonesкак в примере, чтобы создать зону для температур выше 10°C и выше 20°C. -
Пороговые линии на оси X: Я добавил
plotLinesна оси X для отображения линий на 100 м и 600 м, чтобы указать, где начинаются пороговые области. Это помогает визуально увидеть, где начинаются заданные диапазоны. -
Замечания по цветам: Подбирайте цвета так, чтобы они четко отличались для разных температур. В примере выше используются два основных цвета: один для температур ниже 10°C и другой для температур между 10°C и 20°C.
- Данные: Убедитесь, что данные в
dataдля каждой серии корректны и соответствуют каждому диапазону температур.
С этими изменениями вы должны получить график с заливками разных цветов для заданных диапазонов, пунктирными линиями на порогах и корректными отображениями температур.