(一)react-charts案例一
一.案例学习网址:
https://react-charts.js.org/examples/line
二.源码下载网址:
https://github.com/react-tools/react-charts
三.具体详情使用
1.比如说,我比较喜欢官网这个案例
2.到本地创建一个Create React App运行文件夹,例如我创建了一个文件夹叫my-app
3.下载官网源码,下载好之后,比如说我需要的是上图的案例,那么我找到源码对应的两个js文件。
4.将ChartConfig.js复制到我的my-app文件夹内,然后将LineChart.js文件内的代码复制到我的my-app文件夹内的App.js里面的return内容处
最后App.js上的完整代码为:(注意:此处我直接将ChartConfig.js复制在了src目录下)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Chart } from "react-charts";
import ChartConfig from './ChartConfig'
class App extends Component {
render() {
return (
<div className="App">
<ChartConfig series={10}>
{({ data }) => (
<Chart
data={data}
series={{
showPoints: false,
}}
axes={[
{ primary: true, type: 'time', position: 'bottom' },
{ type: 'linear', position: 'left' },
]}
tooltip
/>
)}
</ChartConfig>
</div>
);
}
}
export default App;
7.分别执行如下代码
npm install react-charts --save
npm install ResizableBox --save
8.npm start就能看到上图我们想要的效果
四.进行简单修改操作
App.js
import React, { Component } from 'react';
import './App.css';
import { Chart } from "react-charts";
import ChartConfig from './ChartConfig'
class App extends Component {
render() {
const setdata=[{
label: "Series 1",
data: [[0, 1], [1, 2], [2, 4], [3, 2], [4, 7]]
},
{
label: "Series 2",
data: [[0, 3], [1, 1], [2, 5], [3, 6], [4, 4]]
}]
return (
<div className="App">
<ChartConfig>
{() => (
<Chart
data={setdata}
series={{
showPoints: false,//节点处是否显示小圆点
}}
axes={[
{ primary: true, type: 'time', position: 'bottom' },
{ type: 'linear', position: 'left' },
]}
tooltip//设置到每一个节点的提示
/>
)}
</ChartConfig>
</div>
);
}
}
export default App;
ChartConfig.js
import React from 'react'
import { ResizableBox } from 'react-resizable'
export default class ChartConfig extends React.Component {
render() {
const {children} = this.props //children获取我们前面定义的data
const width = 500;
const height = 300;
const style = {width: '100%',height: '100%'}
return (
<div>
<ResizableBox width={width} height={height}>
<div style={style}>
{children({ })}
</div>
</ResizableBox>
</div>
)
}
}
五.进行实际需求进行修改操作
(二)react-charts案例二(推荐使用,比较容易操作)
一.网址:hhttps://www.fusioncharts.com/charts?product=fusioncharts
二.选择好自己需要的图形类型,我需要多条折线图
三.代码
import React, { Component } from 'react';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
const dataSource = {
"chart": {
"caption": "最上端 : 主标题",
"yaxisname": "y轴主标题",
"subcaption": "最上端 : 副标题",
"numdivlines": "3",
"showvalues": "0",
"legenditemfontsize": "15",
"legenditemfontbold": "1",
"plottooltext": "<b>$dataValue</b> 此处设置鼠标浮动到点上时显示的文字 $label",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "x轴第1个点"
},
{
"label": "x轴第2个点"
},
{
"label": "x轴第3个点"
},
{
"label": "x轴第4个点"
},
{
"label": "x轴第5个点"
},
{
"label": "x轴第6个点"
},
{
"label": "x轴第7个点"
}
]
}
],
"dataset": [
{
"seriesname": "Received",
"data": [
{
"value": "55"
},
{
"value": "45"
},
{
"value": "52"
},
{
"value": "29"
},
{
"value": "48"
},
{
"value": "28"
},
{
"value": "32"
}
]
},
{
"seriesname": "Resolved",
"data": [
{
"value": "50"
},
{
"value": "30"
},
{
"value": "49"
},
{
"value": "22"
},
{
"value": "43"
},
{
"value": "14"
},
{
"value": "31"
}
]
}
]
};
const chartConfigs = {
type: 'msspline',//column2d是柱形图,Pie3D饼图,mscombi2d柱形折线饼结合,dragcolumn2d...,msspline双曲线,spline单曲线
width: 600,
height: 400,
dataFormat: 'json',
dataSource: dataSource,
};
class Chart extends Component {
render () {
return <ReactFC {...chartConfigs} />;
}
}
class App extends Component {
render() {
return (
<Chart />
);
}
}
export default App;
四.效果图