Chart UI
Codes
ChartComponent.jsimport React, { Component } from 'react';
import {Chart, Axis, Tooltip, Geom, Coord, Label} from 'bizcharts';
import DataSet from '@antv/data-set';
const { DataView } = DataSet;export class LineChart extends Component {
render() {
const { data, width, height } = this.props;
if (!data || data.length <= 0)
return null;
const ytitle = {
autoRotate: true,
offset: -10,
textStyle: {
fontSize: '22',
textAlign: 'left',
fill: 'rgb(75,83,87)',
rotate: 0
},
position: 'end',
};
const xtitle = {
autoRotate: true,
offset: -20,
textStyle: {
fontSize: '22',
textAlign: 'center',
fill: 'rgb(75,83,87)',
rotate: 0
},
position: 'end',
};
const line = {
stroke: 'rgb(197,197,200)',
lineWidth: 2
};
const axis = [];
let i = 0;
for (let key in data[0]) {
axis[i++] = key;
}
let cols = {};
cols[axis[1]] = { min: 0};
cols[axis[0]] = { range: [ 0, 1 ] };
const position = axis[0] + '*' + axis[1];
return (
<div style={{width:width,height:height}}>
<Chart width={width} height={height} data={data} scale={cols} padding='auto'>
<Axis name={axis[0]} title={xtitle} tickLine={null} line={line} label={null}/>
<Axis name={axis[1]} title={ytitle} tickLine={null} line={line} label={null}/>
<Tooltip/>
<Geom type="line" position={position} size={2} color='rgb(82,63,91)'/>
<Geom type='point' position={position} size={4} shape={'circle'}
color='rgb(236,142,91)' style={{ stroke: 'rgb(236,142,91)', lineWidth: 2}}>
</Geom>
</Chart>
</div>
)
}
};App.js
import React, { Component } from 'react'; import {LineChart} from './ChartComponent'; import './App.css'; class App extends Component {render() { const data = []; let i = 0; for (i = 0; i < 10; i++) { let time = 1000*Math.random(); let score = 10*Math.random(); data.push({'Timeline':time, 'Score':score}); } return ( <div className="App"> <LineChart data={data} width={400} height={400}> </LineChart> </div> ); }} export default App;
Dependences
yarn add bizcharts yarn add @antv/data-set Refers
https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/g2/clockhttps://github.com/alibaba/BizCharts/tree/master/doc/tutorial
