javascript - 反应 Apexcharts 折线图线不可见
问题描述
我正在使用带有 React 的apexcharts库来实现折线图。它渲染但显示曲线的线不可见。这可能是一大组系列数据。
当我在下面的代码中减少系列中的数据集时,它会正确显示折线图。
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()
这是图形工作的代码笔(不使用反应)。
console.log(new Date("2020-03-17T24:00:00.025385Z").getTime());
推荐阅读
- video-streaming - 通过 HTTP 而不是 picamera 流式传输视频
- visual-studio-code - 如何在vscode中启用从.html格式到.js(使用jsx)的热键
- python - 如何使用棉花糖将复杂对象导出为有效的 json(带双引号)?
- c# - 您可以设置/反转 DataGridView 行的起始索引吗?
- c - 分配被抑制的 fscanf/scanf/sscanf 转换规范不是转换吗?
- delphi - 如何调整 DBGrid 的行高 - Delphi
- python - 运行时错误:函数 AddmmBackward 在索引 1 处返回无效梯度(形状不匹配)
- android-studio - 如何使用 Android Studio Arctic Fox 将 Android 库 aar 作为模块导入?
- python - Python变量存在未定义?
- reactjs - 使用提供的 ref 测试组件的正确方法