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