在現(xiàn)在的工作中，后臺(tái)管理端界面占了很大一塊，管理后臺(tái)除了做前端內(nèi)容控制以外，數(shù)據(jù)統(tǒng)計(jì)常常也是不可或缺的一個(gè)功能，單純的數(shù)字表格在展示上不夠直觀(guān)，不能更好的支持?jǐn)?shù)據(jù)分析。所以，通過(guò)各種圖表來(lái)展示數(shù)據(jù)就變成了一個(gè)更好的選擇。

由于之前使用的是react搭建的web界面，用到的是一個(gè)開(kāi)源的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';

可用的圖表類(lèi)型有：

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":"發(fā)布","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="統(tǒng)計(jì)" 
            yAxisLabel="數(shù)量" 
            xAxisLabel="指標(biāo)"
            showTooltip={ true}
            tooltipFormat={this.formatTooltip}
            />

    );
    
}

更詳細(xì)使用文檔參考
但是下面要針對(duì)幾個(gè)功能做詳細(xì)說(shuō)明：

• 鼠標(biāo)滑動(dòng)提示(toolTip)

• 自定義折線(xiàn)顏色(colorAccessor)

  
  
  Image.png

formatTooltip(d,type) {

    if(type=="singleDay"){
        return ([
            <div style={{width:"80px"}}>
            {d.xValue+"點(diǎn)"+'，'+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;
}