react-chart 中未定义标题

Question

我正在构建一个 covid-19 跟踪器，但是当使用 React 图表在图表上显示数据时，标题未定义

这是我的图表代码

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

这些是我的选项参数

 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");
          },
        },
      },
    ],
  },
};

虽然 legend 设置为 false，但我收到错误消息。请告诉我哪里错了，这会有所帮助。

图表图片。

Answer 1

您需要在此处传递标签属性

data={{
  datasets: [
    {
      backgroundColor: "rgba(204, 16, 52, 0.5)",
      borderColor: "#CC1034",
      data: data,
      label: "your label" // <-- pass this 
    },
  ],
}}

react-chart 中未定义标题

Title is undefined in react-chart

reactjs

material-ui

react-chartjs

react-chartjs-2