我在更改顶点图表中的颜色条时遇到一些问题。该图表是混合图表(折线图/条形图)。 我想更改单个条形颜色。
我尝试过的解决方案是根据顶点图表文档将 fillColor 添加到 series.data 中，但它不起作用。
图表快照 enter image description here
这是我的代码。 哪里
response.device.data.values AND response.flowmeter.values 是一个值数组。
if (newChart !== null) {
newChart.destroy();
}
var options = {
chart: {
height: 350,
stacked: false,
height: '400',
toolbar: {
tools: {
download: true,
selection: false,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: false,
customIcons: []
}
}
},
dataLabels: {
enabled: false
},
stroke: {
width: [2, 1],
curve: 'stepline'
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#008FFB'
},
labels: {
style: {
color: '#008FFB',
}
},
title: {
text: "<?=_('Device(s)')?> (m3)",
style: {
color: '#008FFB'
}
},
tooltip: {
enabled: true
}
},
{
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#00E396'
},
labels: {
style: {
color: '#00E396',
}
},
title: {
text: "<?=_('Flowmeter(s)')?> (m3)",
style: {
color: '#00E396',
}
}
},
],
tooltip: {
followCursor: true,
},
legend: {
horizontalAlign: 'center',
offsetX: 40
},
zoom: {
enabled: false
},
xaxis: {
categories: response.device.data.labels,
labels: {
style: {
fontSize: '10px'
}
}
},
series: [
{
name: '<?=_('Device(s)')?>',
type: 'line',
data: response.device.data.values
},
{
name: '<?=_('Flowmeter(s)')?>',
type: 'bar',
data: response.flowmeter.values
}
],
};
newChart = new ApexCharts(document.querySelector("#new-chart"), options);
newChart.render();
最佳答案
您可以在系列对象中设置颜色属性。 类似这样的事情:
series: [
{
name: '<?=_('Device(s)')?>',
type: 'line',
color: "00FA9A",
data: response.device.data.values
},
{
name: '<?=_('Flowmeter(s)')?>',
type: 'bar',
color: "#F44336",
data: response.flowmeter.values
}
],
关于javascript - 更改顶点图中单个条形的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63260017/