highcharts 图表、图例和工具提示中的线条颜色不匹配
highcharts Line color in the chart, in the legend and in the tooltip do not match
我希望这里有人能帮助我。
我有一个包含多个 y 轴的图表。
我可以调整大多数颜色。
只有图例和工具提示中的颜色与线条颜色不匹配。
线条颜色和轴的颜色为绿色。但是,图例和工具提示中的颜色为蓝色。
有人可以写信告诉我在哪里可以设置这种颜色吗?
example
<script type="text/javascript">
(function(H) {
H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
var rows = proceed.call(this, multiLevelHeaders);
rows = rows.map(row => {
if (row.x) {
row[0] = H.dateFormat('%d.%m.%Y', row.x);
}
return row;
});
return rows;
});
}(Highcharts));
Highcharts.chart('container', {
chart: {
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
labels: {
format: '{value:%d.%m.%Y}'
}
},
yAxis: [{ //Betriebstunden
labels: {
format: '{value} h',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Betriebsstunden',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { //Temperatur MIN, MAX
title: {
text: 'Temperatur Bereich',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} °C',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { //Delta
title: {
text: 'Temperatur Delta',
style: {
color: Highcharts.getOptions().colors[4]
}
},
labels: {
format: '{value} °C',
style: {
color: Highcharts.getOptions().colors[4]
}
}
}, { //Drehzahl
title: {
text: 'Max. Drehzahl',
style: {
color: Highcharts.getOptions().colors[6]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[6]
}
},
opposite: true
}],
tooltip: {
xDateFormat: '%d.%m.%Y',
crosshairs: true,
shared: true
},
series: [{
name: 'Betriebsstunden',
data: <?php echo chartDataTimeDate($mysqli, $sqlBS) ?>,
type: 'spline',
line: {
color: Highcharts.getOptions().colors[2]
},
tooltip: {
valueSuffix: ' h',
},
lineColor: Highcharts.getOptions().colors[2],
lineWidth: 3,
marker: {
enabled: false
}
}, {
name: 'Temperatur',
data: <?php echo chartDataTimeDate($mysqli, $sqlTemp) ?>,
type: 'arearange',
yAxis: 1,
color: Highcharts.getOptions().colors[0],
marker: {
enabled: false
}
},{
name: 'Temperatur Delta',
data: <?php echo chartDataTimeDate($mysqli, $sqlDelta) ?>,
type: 'spline',
yAxis: 2,
tooltip: {
valueSuffix: ' °C'
},
Color: Highcharts.getOptions().colors[4],
lineColor: Highcharts.getOptions().colors[4],
lineWidth: 3,
marker: {
enabled: false
}
},{
name: 'Drehzahl',
data: <?php echo chartDataTimeDate($mysqli, $sqlDZ) ?>,
type: 'spline',
yAxis: 3,
tooltip: {
valueSuffix: ' %'
},
Color: Highcharts.getOptions().colors[6],
lineColor: Highcharts.getOptions().colors[6],
lineWidth: 3,
marker: {
enabled: false
}
}]
});
</script>
设置series.color
而不是series.line.color
:
series: [{
name: 'Betriebsstunden',
type: 'spline',
color: Highcharts.getOptions().colors[2],
...
}, ...]
现场演示: http://jsfiddle.net/BlackLabel/mx8fsbaz/
API参考:https://api.highcharts.com/highcharts/series.line.color
我希望这里有人能帮助我。 我有一个包含多个 y 轴的图表。 我可以调整大多数颜色。 只有图例和工具提示中的颜色与线条颜色不匹配。 线条颜色和轴的颜色为绿色。但是,图例和工具提示中的颜色为蓝色。 有人可以写信告诉我在哪里可以设置这种颜色吗?
example
<script type="text/javascript">
(function(H) {
H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
var rows = proceed.call(this, multiLevelHeaders);
rows = rows.map(row => {
if (row.x) {
row[0] = H.dateFormat('%d.%m.%Y', row.x);
}
return row;
});
return rows;
});
}(Highcharts));
Highcharts.chart('container', {
chart: {
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
labels: {
format: '{value:%d.%m.%Y}'
}
},
yAxis: [{ //Betriebstunden
labels: {
format: '{value} h',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Betriebsstunden',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { //Temperatur MIN, MAX
title: {
text: 'Temperatur Bereich',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} °C',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { //Delta
title: {
text: 'Temperatur Delta',
style: {
color: Highcharts.getOptions().colors[4]
}
},
labels: {
format: '{value} °C',
style: {
color: Highcharts.getOptions().colors[4]
}
}
}, { //Drehzahl
title: {
text: 'Max. Drehzahl',
style: {
color: Highcharts.getOptions().colors[6]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[6]
}
},
opposite: true
}],
tooltip: {
xDateFormat: '%d.%m.%Y',
crosshairs: true,
shared: true
},
series: [{
name: 'Betriebsstunden',
data: <?php echo chartDataTimeDate($mysqli, $sqlBS) ?>,
type: 'spline',
line: {
color: Highcharts.getOptions().colors[2]
},
tooltip: {
valueSuffix: ' h',
},
lineColor: Highcharts.getOptions().colors[2],
lineWidth: 3,
marker: {
enabled: false
}
}, {
name: 'Temperatur',
data: <?php echo chartDataTimeDate($mysqli, $sqlTemp) ?>,
type: 'arearange',
yAxis: 1,
color: Highcharts.getOptions().colors[0],
marker: {
enabled: false
}
},{
name: 'Temperatur Delta',
data: <?php echo chartDataTimeDate($mysqli, $sqlDelta) ?>,
type: 'spline',
yAxis: 2,
tooltip: {
valueSuffix: ' °C'
},
Color: Highcharts.getOptions().colors[4],
lineColor: Highcharts.getOptions().colors[4],
lineWidth: 3,
marker: {
enabled: false
}
},{
name: 'Drehzahl',
data: <?php echo chartDataTimeDate($mysqli, $sqlDZ) ?>,
type: 'spline',
yAxis: 3,
tooltip: {
valueSuffix: ' %'
},
Color: Highcharts.getOptions().colors[6],
lineColor: Highcharts.getOptions().colors[6],
lineWidth: 3,
marker: {
enabled: false
}
}]
});
</script>
设置series.color
而不是series.line.color
:
series: [{
name: 'Betriebsstunden',
type: 'spline',
color: Highcharts.getOptions().colors[2],
...
}, ...]
现场演示: http://jsfiddle.net/BlackLabel/mx8fsbaz/
API参考:https://api.highcharts.com/highcharts/series.line.color