在现在的工作中，后台管理端界面占了很大一块，管理后台除了做前端内容控制以外，数据统计常常也是不可或缺的一个功能，单纯的数字表格在展示上不够直观，不能更好的支持数据分析。所以，通过各种图表来展示数据就变成了一个更好的选择。
由于之前使用的是react搭建的web界面，用到的是一个开源的react化的d3工具rd3。
一、安装
- 如果未安装react和d3需要先安装
npm install react react-dom
// currently we do not support d3@v4.0
npm install d3@v3.5.17
然后安装rd3：npm install rd3
二、引用工具
var rd3 = require('rd3');
// es6
import rd3 from 'rd3';
可用的图表类型有：
const BarChart = rd3.BarChart;
const LineChart = rd3.LineChart;
const PieChart = rd3.PieChart;
const AreaChart = rd3.AreaChart;
const Treemap = rd3.Treemap;
const ScatterChart = rd3.ScatterChart;
const CandleStickChart = rd3.CandleStickChart;
使用示例：
import rd3 from 'rd3';
renderBarChart(){
let barData=[{"x":"浏览","y":1000},{"x":"阅读","y":2000},{"x":"发布","y":2000}];
var BarChart = rd3.BarChart;
return (
<BarChart
data={barData}
legend={true}
width="95%"
viewBoxObject={{
x: 0,
y: 0,
width: 900,
height: 300
}}
height={300}
title="统计"
yAxisLabel="数量"
xAxisLabel="指标"
showTooltip={ true}
tooltipFormat={this.formatTooltip}
/>
);
}
更详细使用文档参考
但是下面要针对几个功能做详细说明：
- 鼠标滑动提示(toolTip)
-
自定义折线颜色(colorAccessor)
Image.png
formatTooltip(d,type) {
if(type=="singleDay"){
return ([
<div style={{width:"80px"}}>
{d.xValue+"点"+'，'+d.seriesName + ': ' + String(d.yValue)}
</div>
])
}else{
return [
Common.getTime_ymd_hms("date",d.xValue),
'，'+d.seriesName + ': ' + String(d.yValue),
];
}
}
myColors(idx){
return ['#FF6461','#0000FF','#AAA439','#AA3C39'][idx];
}
myColorAccessor(series,idx){
return idx;
}
