反應 Apexcharts 折線圖線不可見

Question

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

渲染的結果是這樣的：

請幫我解決這個問題。

Answer 1

系列數組中的最后一個 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());

Answer 2

當系列數據的長度與 x 軸類別數據的長度不匹配時出現此錯誤，只需確保 x 軸類別數據長度與系列數據匹配即可解決問題

Answer 3

當某些“y”值為 null 時，可能會出現相同的問題。