如何在react组件中导入chartist?

石岩石

我正在尝试使用来自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中使用它。

Simbathesailor

npm install react-chartist --save

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

npm install chartist --save.

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

import chartistGraph from "react-chartist";

这是如何在codeandbox中实现它的链接。codeandbox链接

点击此链接以获取实施链接

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章