反应 Apexcharts 折线图线不可见答案

【问题标题】：React Apexcharts Line Chart line not visible反应 Apexcharts 折线图线不可见
【发布时间】：2020-03-19 00:14:28
【问题描述】：

我正在使用 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>
  );
};

渲染结果是这样的：

请帮我解决这个问题。

【问题讨论】：

标签： javascript reactjs apexcharts

【解决方案1】：

您的系列数组中的最后一个 x 值是导致您的问题的 NaN 值。

我猜

new Date("2020-03-17T24:00:00.025385Z").getTime()

应该是

new Date("2020-03-18T00:00:00.025385Z").getTime()

这是图表工作的codepen（不使用反应）。

console.log(new Date("2020-03-17T24:00:00.025385Z").getTime());

【讨论】：