DuLinRain / react-highchart

基于highchart封装,简化options的配置

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React-Highchart封装与使用方法

通过dataInfo简化配置,只需配置data(数据源)、type(图类型)、xkey(x轴键)、ykeys(数值键)四个必备字段,其它可选字段同highcharts的options配置。若dataInfo配置不能满足,也可以通过options完成复杂配置,更多图形及使用示例敬请期待......

点击这里在线查看

github地址

https://github.com/DuLinRain/react-highchart

使用方法

import {HighchartsReact} from './HighchartsReact'
import Highcharts from 'highcharts' //依赖于Highcahrt

const testdata = [{
    name: '2012',
    age: 1,
    height: 100
  }, {
    name: '2013',
    age: 2,
    height: 200
  }, {
    name: '2014',
    age: 5,
    height: 100
  }, {
    name: '2015',
    age: 8,
    height: 170
  }, {
    name: '2016',
    age: 12,
    height: 10
  }, {
    name: '2017',
    age: 19,
    height: 230
  }]


<HighchartsReact
    highcharts={Highcharts}
    options={{}}
    dataInfo={{
      data: testdata,
      type: 'line',
      xkey: 'name',
      ykeys: [{
        key: 'age'
      }, {
        key: 'height'
      }],
      title: {
        text: '基础折线图'
      }
    }}
  />

更多图形示例

条形图

面积图

柱状图

条形图

极地图

蜘蛛图

About

基于highchart封装,简化options的配置


Languages

Language:JavaScript 100.0%