如何在 React 组件中导入 Chartist？

Question

我正在尝试使用来自 chartist.js link 的图表：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 not define。如何导入一些库并在 reactjs 中使用它。

Answer 1

运行

npm install react-chartist --save

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

npm install chartist --save.

然后您就可以将 Chartist 导入到您的应用程序中了。

import chartistGraph from "react-chartist";

这里是 link 如何在 codesandbox 中实现它。 codesandbox Link

按照此 link 执行 Link

Answer 2

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

 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

See this link for decription

如何在 React 组件中导入 Chartist？

How to import chartist in react component?

javascript

reactjs

chartist.js