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

4urapxun 于 2022-11-07 发布在 Chart.js

关注(0)|答案(1)|浏览(248)

我试着在我的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;

chart.js

来源：https://stackoverflow.com/questions/72240999/how-do-i-use-chartjs-in-react-project-properly

1条答案

按热度按时间

jaql4c8m1#

您传递给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中了解更多信息并查看更多示例。

赞(0）回复(0）举报 2022-11-07

我来回答

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

1条答案

相关问题

热门标签

最新问答