数据可视化之RD3的图表展示

在现在的工作中，后台管理端界面占了很大一块，管理后台除了做前端内容控制以外，数据统计常常也是不可或缺的一个功能，单纯的数字表格在展示上不够直观，不能更好的支持数据分析。所以，通过各种图表来展示数据就变成了一个更好的选择。

由于之前使用的是react搭建的web界面，用到的是一个开源的react化的d3工具rd3。

一、安装

1. 如果未安装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;
}