javascript React Apexcharts折线图线不可见

jtw3ybtb  于 2023-04-04  发布在  Java
关注(0)|答案(4)|浏览(129)

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

渲染结果如下:

请帮我解决这个问题。

6uxekuva

6uxekuva1#

系列数组中的最后一个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());
wribegjk

wribegjk2#

当系列数据的长度与x轴类别数据的长度不匹配时,我得到了这个错误,只要确保x轴类别数据长度与系列数据匹配,它就可以解决这个问题!

rjee0c15

rjee0c153#

stroke : { colors : [#000] //add your colors here }中将使其可见,您也可以在笔划中添加show : true

w8f9ii69

w8f9ii694#

当某些“y”值为空时,可能会出现相同的问题。

相关问题