Question

我正在使用React并希望将其与Chart.js绑定。

下图可行，但我不知道如何在React中创建一个Graph组件。

我的Chart.js代码如下所示：

africa

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{
        label: '# of Likes',
        data: [12, 19, 3],
        backgroundColor: [
           'rgba(255, 99, 132, 0.2)',
           'rgba(54, 162, 235, 0.2)',
           'rgba(255, 206, 86, 0.2)'
        ] 
     }]
   }
});

然后我尝试将其合并到React中。不幸的是，这不起作用。

我的代码尝试可以在这里看到。这有点工作，但不是真的，我不知道采取什么方法。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Answer 1

我一直在使用react-charjs和react-chart-js2，如果您想要更多控制权，可以直接在组件中使用Chartjs，似乎它们有其局限性。

import React from "react";
var Chart = require("chart.js");

class Layout extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const node = this.node;

    var myChart = new Chart(node, {
      type: "bar",
      data: {
        labels: ["Red", "Blue", "Yellow"],
        datasets: [
          {
            label: "# of Likes",
            data: [12, 19, 3],
            backgroundColor: [
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)"
            ]
          }
        ]
      }
    });
  }

  render() {
    return (
      <div>
        <canvas
          style={{ width: 800, height: 300 }}
          ref={node => (this.node = node)}
        />
      </div>
    );
  }
}

export default Layout;

Answer 2

在GitHub上有一个来自ReactJS组织的React wrapper around ChartJS。它确实支持条形图。也许尝试这个（如果不作为解决方案，那么作为灵感的来源）

Answer 3

我在所有react-chartjs-2项目中一直使用react。它也是chartjs库的包装，因此您可以访问chartjs文档中提到的所有功能。

您可以浏览 react-chartjs-2npm库以获取更多信息https://www.npmjs.com/package/react-chartjs-2

Answer 4

您可能想看看一个名为Recharts的库。我认为这是一个内部使用Chartjs的包装程序，并且为不同类型的图表内置了组件，您可以通过提供数据来利用它们来构建自己的图表。它可能无法完全自定义，但是只要您的React代码中包含基本的图表组件，肯定会有助于实现更简洁的实现

Answer 5

这里是使用较新的React钩子构建的包装器组件

export default function Graph({ className, maxHeight, type, data, options }) {
  const graphRef = useRef(null);

  useEffect(() => {
    if (graphRef.current) {
      new Chart(graphRef.current.getContext("2d"), {
        type,
        data,
        options,
      });
    }
  }, [graphRef.current, type, data, options]);

  return (
    <div className={className || ""}>
      <canvas ref={graphRef} style={maxHeight ? { maxHeight } : null} />
    </div>
  );
}

并使用如下所示将数据传递到chart.js

<Graph
  className="col-md-4"
  maxHeight="200px"
  type="bar"
  data={{...}}
  options={{...}}
/>

使用Charts.js做出反应

5 个答案: