Javascript 将Charts.js与react一起使用

我正在使用React，并希望将其与

下面的图表可以工作，但我不确定如何在React中创建图形组件

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

var ctx=document.getElementById（“myChart”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：[“红色”、“蓝色”、“黄色”]，
数据集：[{
标签：“#喜欢的人”，
数据：[12,19,3]，
背景颜色：[
"rgba(255,99,132,0.2)",，
“rgba（54162235,0.2）”，
‘rgba（255、206、86、0.2）’
] 
}]
}
});

然后我试着将其纳入React中。不幸的是，这不起作用

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

var Graph = React.createClass({

    render: function() {
        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)'
               ] 
            }]
          }
       });
    }
})

GitHub上有ReactJS组织提供的。它确实支持条形图。也许可以尝试一下（如果不是作为一种解决方案，那么作为灵感的来源）

我一直在使用，而且如果您想在组件中直接使用更多控件，它们似乎有自己的局限性

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;

从“React”导入React；
var Chart=require（“Chart.js”）；
类布局扩展了React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
const node=this.node；
var myChart=新图表（节点{
输入：“酒吧”，
数据：{
标签：[“红色”、“蓝色”、“黄色”]，
数据集：[
{
标签：“喜欢的人”，
数据：[12,19,3]，
背景颜色：[
"rgba(255,99,132,0.2),，
“rgba（54162235,0.2）”，
rgba（255、206、86、0.2）
]
}
]
}
});
}
render（）{
返回(
（this.node=node）}
/>
);
}
}
导出默认布局；

您可能需要查看名为的库。我认为它是一个在内部使用Chartjs的包装器，并为不同类型的图表内置了组件，您可以利用这些组件通过提供数据来构建自己的图表。它可能不是完全可定制的，但只要您的React代码具有基本的图表组件，它肯定会有助于实现更干净的实现。它也是chartjs库的包装器，因此您可以访问

chartjs

文档中提到的所有功能

---

您可以浏览react-chartjs-2的npm库以了解更多信息，这里是一个使用更新的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>
  );
}

导出默认函数图（{className，maxHeight，type，data，options}）{
const graphRef=useRef（null）；
useffect（（）=>{
如果（graphhref.current）{
新图表（graphRef.current.getContext（“2d”）{
类型，
数据，
选项，
});
}
}，[graphRef.current，type，data，options]）；
返回(
);
}

并使用下面的方法将数据传递到chart.js

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

您丢失了“this.node=React.createRef（）；”在constructor@Ging3r不需要在构造函数中声明。他在

ref

函数中内联地分配

this.node

，该函数为类组件的整个上下文定义该节点。他的代码仍将按原样工作。嗨，我如何使用函数组件实现这一点？注意：本答案中提到的react chartjs库已存档，而不是预期的答案，它比Chart.js重得多。