如何在react组件中导入图表?

IT技术 javascript reactjs chartist.js
2021-05-25 11:27:33

我正在尝试使用来自 chartist.js 链接的图表:https ://gionkunz.github.io/chartist-js/examples.html#simple-line-chart

当我尝试在我的代码中使用它们时,我让 Chartist 定义了如何将它导入到我的组件中?

代码:

   import React, { Component } from 'react';
import chartistGraph from "react-chartist";

const simpleLineChartData = {
          labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
          series: [
            [12, 9, 7, 8, 5],
            [2, 1, 3.5, 7, 3],
            [1, 3, 4, 5, 6]
          ]
}

class Chart extends Component {

  render(){
    return(
      <div>
            <chartistGraph data={simpleLineChartData} type={'Line'} /> 
      </div>

    )}

}

export default Chart;

上面的代码给出错误,说 Chartist 未定义。如何导入一些库并在 reactjs 中使用它。

2个回答

npm install react-chartist --save

还有一件事,您还需要安装 chartist,因为它是依赖项

npm install chartist --save.

然后您将能够将 Chartist 导入您的应用程序。

import chartistGraph from "react-chartist";

这是如何在 codeandbox 中实现它的链接。 代码和框链接

按照此链接执行链接

您可以从 'react-chartist' 导入 ChartistGraph 为:

 import ChartistGraph from 'react-chartist';

或者

var ChartistGraph = require('react-chartist')

此外,'react-chartist' 不包含 Chartist 的 css 文件,因此如果您想添加样式,请将其添加到您的 index.html 文件中:

 <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
 <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js</script>

或者你可以安装'chartist'包

 npm install chartist

请参阅此链接以获取说明