javascript - 对象未渲染

Question

我正在使用反应图表构建一个 covid-19 跟踪器，但是当我的数据显示在屏幕上时，它并没有像预期的那样出现。

这是我的图表代码

 <div >
  {data?.length > 0 && (
    <Line
      data={{
        datasets: [
          {
            backgroundColor: "rgba(204, 16, 52, 0.5)",
            borderColor: "#CC1034",
            data: data,
          },
        ],
      }}
      options={options}
    />
  )}
</div>

[在此处输入图像描述][1] 这些是我的选项参数

const options = {
  legend: {
    display: false,
  },
  elements: {
    point: {
      radius: 0,
    },
  },
  maintainAspectRatio: false,
  tooltips: {
    mode: "index",
    intersect: false,
    callbacks: {
      label: function (tooltipItem, data) {
        return numeral(tooltipItem.value).format("+0,0");
      },
    },
  },
  scales: {
    xAxes: [
      {
        type: "time",
        time: {
          format: "MM/DD/YY",
          tooltipFormat: "ll",
        },
      },
    ],
    yAxes: [
      {
        gridLines: {
          display: false,
        },
        ticks: {
          // Include a dollar sign in the ticks
          callback: function (value, index, values) {
            return numeral(value).format("0a");
          },
        },
      },
    ],
  },
};

   

我的图表正在被拉伸并且它的高度正在增加。

标签： javascriptreactjs