我正在使用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>
);
};
渲染结果如下:
请帮我解决这个问题。
4条答案
按热度按时间6uxekuva1#
系列数组中的最后一个x值是导致问题的NaN值。
我猜
new Date("2020-03-17T24:00:00.025385Z").getTime()
应该是
new Date("2020-03-18T00:00:00.025385Z").getTime()
这里有一个codepen的图形工作(不使用react)。
wribegjk2#
当系列数据的长度与x轴类别数据的长度不匹配时,我得到了这个错误,只要确保x轴类别数据长度与系列数据匹配,它就可以解决这个问题!
rjee0c153#
在
stroke : { colors : [#000] //add your colors here }
中将使其可见,您也可以在笔划中添加show : true
w8f9ii694#
当某些“y”值为空时,可能会出现相同的问题。