Camila Waz 发布于
2020-09-02 15:40:58

Chartist.js的 React组件

上一篇文章:

CSS3面试题2020

Chartist.js的 React组件
1、安装
npm install react-chartist --save
Chartist是对react Chartist的对等依赖。如果尚未安装,则需要安装它。
npm install chartist --save

2、用法
import React from 'react';
import ReactDOM from 'react-dom';
import ChartistGraph from 'react-chartist';
class Bar extends React.Component {
  render() {
    var data = {
      labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
      series: [
        [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
      ]
    };
    var options = {
      high: 10,
      low: -10,
      axisX: {
        labelInterpolationFnc: function(value, index) {
          return index % 2 === 0 ? value : null;
        }
      }
    };
    var type = 'Bar'
    return (
      <div>
        <ChartistGraph data={data} options={options} type={type} />
      </div>
    )
  }
}
ReactDOM.render(<Bar />, document.body)
3、CDN文件
<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>  
文章来源:https://github.com/fraserxu/react-chartist
最后生成于 2020-10-03 21:09:20
上一篇文章:

CSS3面试题2020