在React.js中可视化谷歌分析数据，编辑json

npm install react react-dom
npm install react-google-charts
npm install react-json-editor-ajrm

import React from 'react';
import { Chart } from 'react-google-charts';
import JsonEditor from 'react-json-editor-ajrm';

<Chart
  width={'500px'}
  height={'300px'}
  chartType="ColumnChart"
  loader={<div>Loading Chart</div>}
  data={[
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350],
  ]}
  options={{
    title: 'Company Performance',
    hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
    vAxis: { minValue: 0 },
  }}
  legendToggle
/>

<JsonEditor
  id='unique-id'
  value={jsonData}
  onChange={this.handleJsonChange}
  height='300px'
/>