背景
调查了react下的图工具库， 并继承到项目中， 经过调研列出如下两个图工具库，可以同时使用。
data-ui
react-c3js
在一个工具中没有所需的图时候， 可以使用另一个替代。
data-ui
https://williaster.github.io/data-ui/?selectedKind=histogram&selectedStory=Playground&full=0&addons=0&stories=1&panelRight=0
A collection of custom + wrapped components for data-rich (desktop) UIs.
?
| @data-ui/xy-chart |
|
| @data-ui/histogram |
|
| @data-ui/sparkline |
|
| @data-ui/network |
|
| @data-ui/radial-chart |
|
| @data-ui/event-flow |
|
| @data-ui/data-table |
|
| @data-ui/theme |
|
| @data-ui/demo |
?
react-c3js
https://github.com/bcbcarl/react-c3js
React component for C3.js
?
import C3Chart from ‘react-c3js‘; import ‘c3/c3.css‘; const data = { columns: [ [‘data1‘,30,200,100,400,150,250],[‘data2‘,50,20,10,40,15,25] ] }; const mountNode = document.getElementById(‘react-c3js‘); ReactDOM.render(<C3Chart data={data} />,mountNode);
?
其属性都是继承与C3,可以使用C3的配置设置为此处的组件的属性。
https://c3js.org/
Properties
Check out C3.js Reference for more details.
- data
- title
- size
- padding
- color
- interaction
- transition
- oninit
- onrendered
- onmouSEOver
- onmouSEOut
- onresize
- onresized
- axis
- grid
- regions
- legend
- tooltip
- subchart
- zoom
- point
- line
- area
- bar
- pie
- donut
- gauge
- className
- style
- unloadBeforeLoad
- onPropsChanged
?
C3
https://c3js.org/
D3-based reusable chart library
?
c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications.
?
Why C3?
Comfortable
C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don‘t need to write D3 code any more.
Customizable
C3 gives some classes to each element when generating,so you can define a custom style by the class and it‘s possible to extend the structure directly by D3.
Controllable
C3 provides a variety of APIs and callbacks to access the state of the chart. By using them,you can update the chart even after it‘s rendered.
例子
var chart = c3.generate({ bindto: ‘#chart‘,data: { columns: [ [‘data1‘,30,200,100,400,150,250],[‘data2‘,50,20,10,40,15,25] ] } });
?
例子：
https://c3js.org/examples.html
https://github.com/c3js/c3/tree/master/htdocs/samples
?
D3
https://d3js.org/
?
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML,SVG,and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework,combining powerful visualization components and a data-driven approach to DOM manipulation.
?
例子：
https://github.com/d3/d3/wiki/Gallery
https://www.d3-graph-gallery.com/wordcloud.html
