byronlee / giochart Goto Github PK

import React from 'react';
import GioChart, { Chart, ContextListener, DataSource, GrTable } from 'giochart';

const dataParams = {...};
const chartData = {...};
const drawParams ={...};
const jsonArray=[{...}, {...}];
// 独立数据源绘图，drawParams根据数据源返回的meta.columns计算
const  Section1 = (props) => <GioChart chartType='line' params={dataParams} />;

// 手工提供数据源
const  Section2 = (props) => <Chart chartParams={drawParams} source={jsonArray} />;

// 一对多图形,手工控制
const Section3 = (props) => (
  <div>
    <h1>simple Demo</h1>
    <DataSource params={dataParams}>
    {/*inside GrLoader it could be any JSX node*/}
        <ContextListener chartParams={drawParams} />
        <div>
            <ContextListener chartParams={otherParams} />
        </div>
    </DataSource>
  </div>);
React.render(<div>
  <Section1 />
  <Section2 />
  <Section3 />
</div>, document.getElementById('__react-content'));