代码之家 › 专栏 › 技术社区 › stone rock

如何在react组件中导入charist?

chartist.js reactjs javascript

stone rock · 技术社区 · 7 年前

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

当我试图在我的代码中使用它们时,我正在让charist定义如何在我的组件中导入它?

代码:

   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;

上面的代码给出了一个错误,说图表没有定义。如何导入一些库并在reactjs中使用它。

2 回复 | 直到 7 年前

simbathesailor 7 年前

跑

npm install react-chartist --save

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

npm install chartist --save.

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

import chartistGraph from "react-chartist";

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

按照此链接执行 Link

Hitesh Chaudhari 7 年前

您可以从“react charist”导入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>

或者你可以安装“charist”软件包

 npm install chartist

See this link for decription

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前