我如何在 React 项目中正确使用 chartjs？

Question

我试图在我的 React 项目中使用 chartjs，但它不起作用。我做错了什么？

您可以在此处查看控制台日志：

logs

import styled from "styled-components";
import { Bar } from "react-chartjs-2";

const WeatherChart = () => {
  return (
    <Container>
      <Bar
        data={{ labels: ["Red", "Blue"] }}
        width={100}
        height={50}
        options={{ maintainAspectRatio: false }}
      />
    </Container>
  );
};

const Container = styled.section`
  height: 50%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
`;

export default WeatherChart;

Answer 1

您传递给 Bar 的属性不正确。具体来说，您的 data 属性缺少自己的 datasets 属性，正如 Chart.js 尝试调用 setDatasets.

时的错误日志中所见

假设您要绘制过去一周每一天的温度图表：

您的 labels 属性：

const labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']

您的 data 属性：

const data = {
  labels,
  datasets: [
    {
      label: 'Temperatures',
      data: labels.map(() => Math.random() * 100),
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
    },
  ],
}

您的 options 属性：

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Chart.js Bar Chart',
    },
  },
}

将它们传递给 Bar:

return <Bar options = {options} data = {data} />

您的图表：

在 docs 中了解更多信息并查看更多示例。

我如何在 React 项目中正确使用 chartjs？

How do i use chartjs in react project properly?

javascript

reactjs

chart.js