Question

I am trying to use charts from chartist.js link: https://gionkunz.github.io/chartist-js/examples.html#simple-line-chart

When I try to use them in my code I am getting Chartist to defined how can I import it in my component ?

Code:

   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;

Above code gives error saying Chartist not define. How to import some library and use it in reactjs.

Answer 1

运行

npm install react-chartist --save

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

npm install chartist --save.

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

import chartistGraph from "react-chartist";

以下是如何在codesandbox中实现它的链接。 codesandbox Link

请按照此链接执行Link

Answer 2

您可以从＆＃39; react-chartist＆＃39;中导入ChartistGraph。为：

 import ChartistGraph from 'react-chartist';

或

var ChartistGraph = require('react-chartist')

此外，＆＃39; react-chartist＆＃39;不包含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>

或者你可以安装＆＃39; chartist＆＃39;包

 npm install chartist

See this link for decription

How to import chartist in react component?

2 个答案: