react-d3 basic charts, charts that we support:
- Line Chart
- Multiple Line Chart
- Scatter Plot
- Area Chart
- Area Stack Chart
- Bar Chart
- Bar Group Chart
- Bar Stack Chart
- Bar Horizontal Chart
- Bar Group Horizontal Chart
- Bar Stack Horizontal Chart
- Pie Chart
- Donut Chart
- Line Chart
"use strict";varReact=require('react');varReactDOM=require('react-dom');varLineChart=require('react-d3-basic').LineChart;(function(){vargeneralChartData=require('./data/user.json');varchartSeries=[{field: 'age',name: 'Age',color: '#ff7f0e',style: {"stroke-width": 2,"stroke-opacity": .2,"fill-opacity": .2}}],x=function(d){returnd.index;}ReactDOM.render(<LineChartwidth={600}height={300}data={generalChartData}chartSeries={chartSeries}x={x}/>,document.getElementById('data_line'))})()Clone code react-d3-basic.js or minify js react-d3-basic.min.js and include the script in your HTML.
You'll also need react, react-dom, d3
- Line Chart
<!DOCTYPE html><html><head><title>
Line Chart example
</title></head><body><divid="data_line"></div><scriptsrc="https://fb.me/react-0.14.2.js"></script><scriptsrc="https://fb.me/react-dom-0.14.2.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script><scriptsrc="../react-d3-basic.min.js"></script><scripttype="text/babel">varLineChart=ReactD3Basic.LineChart;vardata=[{"age": 39,"index": 0},{"age": 38,"index": 1},{"age": 34,"index": 2},{"age": 12,"index": 3}];varchartSeries=[{field: 'age',name: 'Age',color: '#ff7f0e',style: {"stroke-width": 2,"stroke-opacity": .2,"fill-opacity": .2}}],x=function(d){returnd.index;}ReactDOM.render(<LineChartwidth={600}height={300}data={data}chartSeries={chartSeries}x={x}/>,document.getElementById('data_line'))</script></body></html>npm install --save react-d3-basic
Building Charts.
- Line Chart
- Area Chart
- Area Stack Chart
- Bar Chart
- Bar Group Chart
- Bar Stack Chart
- Scatter Plot
- Pie Chart
- Donut Chart
- Bar Horizontal
- Bar Stack Horizontal
- Bar Group Horizontal
$ npm install
$ node devServer.js
Open localhost:5000/example
Build production js, min.js code
$ npm run prod
If you want to modify the docs file, please modify docs_pre folder.
After you finish, remember to install smash-md first, then run sh doc.sh to compile the readme.
Your new readme would show in docs folder.
- Initial release
- Babel 5
- D3 3.0
- Move to Babel 6.
- D3 4.0.
- improve example folder.
Apache 2.0