我正在使用apexcharts使用 React 实现折线图的库。它会渲染,但显示曲线的线不可见。这可能是一大组系列数据。
当我减少下面代码中的系列数据集时,它会正确显示折线图。
const Dashboard = () => {
const chartData = {
options: {
chart: {
id: "basic-bar",
type: "line",
toolbar: {
show: false
}
},
xaxis: {
type: "datetime"
},
stroke: {
curve: "smooth"
}
},
series: [
{
name: "Series 1",
data: [
{
x: new Date("2020-03-17T00:00:00.025385Z").getTime(),
y: 0
},
{
x: new Date("2020-03-17T01:00:00.025385Z").getTime(),
y: 5
},
{
x: new Date("2020-03-17T02:00:00.025385Z").getTime(),
y: 3
},
{
x: new Date("2020-03-17T03:00:00.025385Z").getTime(),
y: 2
},
{
x: new Date("2020-03-17T04:00:00.025385Z").getTime(),
y: 0
},
{
x: new Date("2020-03-17T05:00:00.025385Z").getTime(),
y: 0
},
{
x: new Date("2020-03-17T06:00:00.025385Z").getTime(),
y: 0
},
{
x: new Date("2020-03-17T07:00:00.025385Z").getTime(),
y: 56
},
{
x: new Date("2020-03-17T08:00:00.025385Z").getTime(),
y: 22
},
{
x: new Date("2020-03-17T09:00:00.025385Z").getTime(),
y: 35
},
{
x: new Date("2020-03-17T10:00:00.025385Z").getTime(),
y: 20
},
{
x: new Date("2020-03-17T11:00:00.025385Z").getTime(),
y: 25
},
{
x: new Date("2020-03-17T12:00:00.025385Z").getTime(),
y: 30
},
{
x: new Date("2020-03-17T13:00:00.025385Z").getTime(),
y: 32
},
{
x: new Date("2020-03-17T14:00:00.025385Z").getTime(),
y: 43
},
{
x: new Date("2020-03-17T15:00:00.025385Z").getTime(),
y: 41
},
{
x: new Date("2020-03-17T16:00:00.025385Z").getTime(),
y: 42
},
{
x: new Date("2020-03-17T17:00:00.025385Z").getTime(),
y: 56
},
{
x: new Date("2020-03-17T18:00:00.025385Z").getTime(),
y: 78
},
{
x: new Date("2020-03-17T19:00:00.025385Z").getTime(),
y: 50
},
{
x: new Date("2020-03-17T20:00:00.025385Z").getTime(),
y: 45
},
{
x: new Date("2020-03-17T21:00:00.025385Z").getTime(),
y: 10
},
{
x: new Date("2020-03-17T22:00:00.025385Z").getTime(),
y: 15
},
{
x: new Date("2020-03-17T23:00:00.025385Z").getTime(),
y: 5
},
{
x: new Date("2020-03-17T24:00:00.025385Z").getTime(),
y: 3
}
]
}
]
};
return (
<div>
<Chart
options={chartData.options}
series={chartData.series}
type="line"
width="100%"
height={250}
/>
</div>
);
};
请帮我解决这个问题。
最佳答案
系列数组中的最后一个 x 值是 NaN 值,这会导致您的问题。
我猜
new Date("2020-03-17T24:00:00.025385Z").getTime()
应该是
new Date("2020-03-18T00:00:00.025385Z").getTime()
这是一个codepen图表工作的(不使用 react )。
console.log(new Date("2020-03-17T24:00:00.025385Z").getTime());
关于javascript - React Apexcharts 折线图线条不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60742874/