react圖工具集成

背景

調查了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