@Mic
Hab nochmal nen bissle weiter am JSON Chart gebastelt. Jetzt kann man damit auch Farbverläufe für Line und Füllfarbe verwenden.
Anbei ein Beispiel:
Skript:
const chromaJs = require("chroma-js")
let chart = {}
let values = []
let axisLabels = []
let colors = [];
let fakeLine = [];
let gradientChartColors = [ // Gradient Farben für Charts, value = Temperatur
{ value: -20, color: '#5b2c6f' },
{ value: 0, color: '#2874a6' },
{ value: 14, color: '#73c6b6' },
{ value: 22, color: '#008000' },
{ value: 27, color: '#FFA500' },
{ value: 35, color: '#FF0000' }
]
let gradientColors = getGradientColors(-20, 40, gradientChartColors);
for (var i = -20; i <= 40; i++) {
axisLabels.push('');
let val = randomIntFromInterval(-15, 40)
values.push(i);
colors.push(gradientColors.getColorByValue(i));
fakeLine.push(-20);
}
chart = {
axisLabels: axisLabels,
graphs: [
{
data: values,
type: 'line',
datalabel_color: 'white',
datalabel_backgroundColor: colors,
datalabel_offset: -12,
// line_PointColor: colors,
// line_PointColorBorder: colors,
line_pointSize: 0,
line_Thickness: 3,
datalabel_show: true,
datalabel_borderRadius: 15,
legendText: 'Temperatur',
yAxis_id: 0,
yAxis_gridLines_show: true,
yAxis_gridLines_border_show: true,
yAxis_gridLines_ticks_show: true,
yAxis_showTicks: false,
yAxis_zeroLineWidth: 0.4,
line_UseFillColor: true,
datalabel_steps: 3,
use_gradient_color: true,
gradient_color: gradientChartColors,
use_line_gradient_fill_color: true,
line_gradient_fill_color: gradientColors.getGradientWithOpacity(60),
line_FillBetweenLines: '+1'
},
{
data: fakeLine,
type: 'line',
datalabel_color: 'transparent',
datalabel_backgroundColor: colors,
// line_PointColor: colors,
// line_PointColorBorder: colors,
line_pointSize: 0,
line_Thickness: 0,
datalabel_borderRadius: 15,
yAxis_id: 0,
datalabel_show: false,
}
]
}
function getGradientColors(min, max, colorValArray) {
let delta = max - min;
let chromaColors = []
let chromaDomains = [];
for (const item of colorValArray) {
chromaColors.push(item.color);
chromaDomains.push(item.value / delta);
}
let chroma = chromaJs.scale(chromaColors).domain(chromaDomains);
return {
getColorByValue: function (val) {
if (val > max) {
return chroma(1).hex();
} else if (val < min) {
return chroma(0).hex();
} else {
return chroma(val / delta).hex();
}
},
getGradientWithOpacity: function (opacity) {
colorValArray.forEach(item => {
item.color = chromaJs(item.color).alpha(opacity / 100).hex();
});
return colorValArray;
}
}
}
function randomIntFromInterval(min, max) { // min and max included
return Math.floor(Math.random() * (max - min + 1) + min);
}
setState('0_userdata.0.chart.tempColors', JSON.stringify(chart), true);
Funktioniert mit der aktuellen master von git -> v0.2.74
Weiter kann man jetzt auf Füllfarbe zwischen zwei Linien realisieren, sieht dann z.B. so aus.
Ein Beispiel dazu ist auch im obigen Skript - property line_FillBetweenLines
