我在循环中创建了多个highcharts,并根据数据给予不同的颜色,但当创建多个图表时,它们的颜色设置不一致。图表上的图例或颜色不一致(图表上的猕猴桃色与苹果色)。
我这里有一把小提琴:https://jsfiddle.net/7xzjwesr/6/
const initialSeries = [{
name: 'image1',
data: [
['kiwi', 14.6666666667],
['apple', 43.0277777778],
['orange', 22.6842105263],
]
},
];
const parsedData = initialSeries.map(s => ({
name: s.name,
data: s.data.map(d => [d[0].toString(), d[1]])
}));
Highcharts.chart('container0', {
chart: {
type: 'column',
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
colors: ["#058DC7", "#50B432", "#ED561B", "#DDDF00"],
plotOptions: {
column: {
colorByPoint: true,
},
},
series: parsedData
});
const initialSeries2 = [ {
name: 'image2',
data: [
['banana', 52.9565217391],
['apple', 57.5806451613]
]
},];
const parsedData2 = initialSeries2.map(s => ({
name: s.name,
data: s.data.map(d => [d[0].toString(), d[1]])
}));
Highcharts.chart('container1', {
chart: {
type: 'column',
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
colors: ["#058DC7", "#50B432", "#ED561B", "#DDDF00"],
plotOptions: {
column: {
colorByPoint: true,
},
},
series: parsedData2
});
const initialSeries3 = [ {
name: 'image3',
data: [
['kiwi', 409.0952380952],
['banana', 31.4495412844],
['apple', 89.6794871795],
['orange', 27.1818181818],
['chiku', 5.9166666667]
]
},];
const parsedData3 = initialSeries3.map(s => ({
name: s.name,
data: s.data.map(d => [d[0].toString(), d[1]])
}));
Highcharts.chart('container2', {
chart: {
type: 'column',
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
colors: ["#058DC7", "#50B432", "#ED561B", "#DDDF00"],
plotOptions: {
column: {
colorByPoint: true,
},
},
series: parsedData3
});
const initialSeries4 = [ {
name: 'image4',
data: [
['banana', 2352.1],
['apple', 28.7096774194]
]
},];
const parsedData4 = initialSeries4.map(s => ({
name: s.name,
data: s.data.map(d => [d[0].toString(), d[1]])
}));
Highcharts.chart('container3', {
chart: {
type: 'column',
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
colors: ["#058DC7", "#50B432", "#ED561B", "#DDDF00"],
plotOptions: {
column: {
colorByPoint: true,
},
},
series: parsedData4
});
const initialSeries5 = [{
name: 'image5',
data: [
['kiwi', 376.6538461538],
['banana', 469.8646616541],
['apple', 59.2481977343],
['chiku', 229.9]
]
}];
const parsedData5 = initialSeries5.map(s => ({
name: s.name,
data: s.data.map(d => [d[0].toString(), d[1]])
}));
Highcharts.chart('container4', {
chart: {
type: 'column',
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
colors: ["#058DC7", "#50B432", "#ED561B", "#DDDF00"],
plotOptions: {
column: {
colorByPoint: true,
},
},
series: parsedData5
});
1条答案
按热度按时间ar7v8xwq1#
如果要保持每个点的颜色一致性,则应在数据配置中进行定义:https://api.highcharts.com/highcharts/series.line.data.color
要设置图例颜色,应定义整个系列的颜色:https://api.highcharts.com/highcharts/series.line.color