Я пытаюсь создать диаграмму, подобную этой:
:
Я уже выполнил все функции, кроме разноцветной линиидиаграмма площади.Я хочу показать разные градиенты диаграммы разными цветами, поэтому мне нужно несколько цветов на линии.
Я уже тестировал зоны, как показано здесь , а также общие плагины, такие как это .Оба не работают.Зоны применяются к области, которая мне не нужна, и плагин может только окрашивать линии ИЛИ области, но не только линии в диаграммах областей.
Мои текущие настройки Highcharts выглядят так:
{
title: {
text: null
},
xAxis: {
crosshair: true,
labels: {
format: '{value} km'
},
title: {
text: null
},
opposite: true,
startOnTick: true,
endOnTick: false,
min: 0
},
yAxis: {
startOnTick: true,
showFirstLabel: false,
endOnTick: false,
maxPadding: 0.35,
title: {
text: null
},
min: 100,
labels: {
format: '{value} m'
}
},
plotOptions: {
dataGrouping: {
enabled: false
},
showInNavigator: true,
stacking: 'normal',
series: {
dragDrop: {
draggableY: true
},
point: {
events: {
mouseOver: (e) => {
this.chartHover.emit({
distance: e.target.x * 1000
});
},
}
},
},
area: {
dragDrop: {
draggableY: true,
dragPrecisionY: 1
}
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
chart: {
update: true,
styledMode: true,
marginBottom: 0,
marginRight: 0
},
tooltip: {
headerFormat: '',
pointFormatter: function () {
let point = this;
if (!this.series) {
return;
}
return '<span class="tooltip-area-series-' + this.series.index + '">\u25CF</span> ' + point.series.name + ': <b>' + point.y + 'm</b><br/>';
},
shared: true
},
series: [],
};
Есть ли для этого встроенное решение?
РЕДАКТИРОВАТЬ:
Я использовал предложенное решение от ppotaczek:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
Это работает довольно хорошо, но имеетнекоторые ошибки производительности, когда вы пытаетесь добавить прибл.более 150 зон в настольных браузерах.
Существует также небольшая проблема рендеринга - небольшие промежутки между зонами.
Наилучшее
Филипп