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