我创建了Apexchart(折线图)组件和日期过滤器选择器。
图表是基于系列的动态图表。
function RenderChart({ series, xaxis }: { series: any; xaxis?: any }) {
const chartOptions = {
options: {
chart: { zoom: { enabled: false } },
stroke: {
curve: 'smooth' as 'smooth' | 'straight' | 'stepline',
width: 3,
},
dataLabels: {
enabled: false,
},
markers: {
size: 0,
hover: {
sizeOffset: 6,
},
},
xaxis: xaxis,
yaxis: [
{ show: false, logarithmic: true },
{ show: false, logarithmic: true },
{ show: false, logarithmic: true },
],
tooltip: {
y: [
{
title: {
formatter: (val) => val,
},
},
{
title: {
formatter: (val) => val,
},
},
{
title: {
formatter: (val) => val,
},
},
],
},
grid: {
borderColor: '#f1f1f1',
xaxis: { lines: { show: true } },
yaxis: { lines: { show: true } },
},
},
}
return (
<div className="w-full h-[400px]">
<ReactApexChart
options={chartOptions.options}
series={series}
type="line"
height={400}
/>
</div>
)
}
....
....
....
function index() {
...
return (
...
<RenderChart series={series} xaxis={xaxis} />
...
)
...
}
系列是动态数据字段。
如下图所示,当系列数据更改时,背景会自动更改。
我该如何解决这个问题?
enter image description hereenter image description here
options: {
chart: { zoom: { enabled: false }, background: 'transparent' },
stroke: {
...
}
}
1条答案
按热度按时间8yparm6h1#
事实上,我有同样的问题与apexChart,我不能解决它,最后被迫使用技巧重新渲染图表,以解决这个问题
我使用state来装载和卸载图表,并使用effect来设置数据更改后的状态
像这样:
我知道这不是最好的方法,但解决了我的问题。希望对你有帮助