数据可视化之自定义图表插件-饼图，(雷达+画像)

D3.js是一个基于HTML/SVG/CSS的数据可视化库，是领域内非常强大的存在了。

问题

1. 什么是数据可视化最好的展现方式？
2. d3介绍？

什么是数据可视化最好的展现方式

数据可视化都有一个共同的目的，那就是准确而高效、精简而全面地传递信息和知识。可视化能将不可见的数据现象转化为可见的图形符号，能将错综复杂、看起来没法解释和关联的数据，建立起联系和关联，发现规律和特征，获得更有商业价值的洞见和价值。

d3使用

   加载 D3 ，例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>

   D3提供各种布局算法，力布局，树，组织等等，我们可以通过D3轻松的构建自己想要的各种图表

介绍

插件使用d3操作svg画布实现

饼图 支持参数

let cfg = {
    id: '',
    data: null,
    w: 300,
    h: 300,
    margin: {top: 100, right: 100, bottom: 100, left: 100},
    innerRadius:40,
    outerRadius:100,
    scaleX:1,
    scaleY:1,
};

饼图 初始化

let pie = [
    {axis: "学历", value: 7},
    {axis: "综合", value: 19},
    {axis: "风险", value: 23},
    {axis: "消费", value: 24},
    {axis: "抗压", value: 27},
    {axis: "抗压2", value: 9},
    {axis: "抗压3", value: 8},
];
Chart.pie({
    id: '#pie',
    w: 200,
    h: 300,
    data:pie,
});

渲染完成

雷达图+画像 支持参数

let cfg = {
        id: '',    
        data: null,    
        circleData: null,    
        radius: 5,//拐点半径    
        w: 300,    
        h: 300,    
        factor: 1,    
        factorLegend: .85,    
        levels: 6,    
        showLevels: 6,//圆覆盖层数    
        maxValue: 0,    
        radians: 2 * Math.PI,    
        opacityArea: 0.2,    
        ToRight: 5,    
        TranslateX: 80,    
        TranslateY: 80,    
        margin: {top: 100, right: 100, bottom: 100, left: 100},    
        topAngle: 30
}

支持数据格式，通过Chart.radar构造图表

let div = '#chart';
let data = [[        
{axis: "学历", value: 10},
        {axis: "综合", value: 11.6},
        {axis: "风险", value: 11.8},
        {axis: "抗压", value: 10},
        {axis: "消费", value: 12},
        {axis: "流水", value: 12},
        {axis: "车辆", value: 10},
        {axis: "房产", value: 12},
        {axis: "履约", value: 10},
        {axis: "负债", value: 12},
        {axis: "收入", value: 12},
    ]];
let tempData = [ 
    '上官婉儿',
    '女',
    '中国江苏省扬州市',
    '画家',
    '爱好收藏名画',
    '已婚已育',
    '百万家产',
    '中产阶级',
    'f',
    '一儿一女',
    '自由职业者',
    '17800966880',
    '24岁',
    '25岁',
];
let width = 400, 
    height = 400;
Chart.radar({    
    w: width,    
    h: height,
    levels: 6,
    showLevels: 2,
    data: data,
    circleData: tempData,
    id: div
});

图表可以同时展示两套数据，对于做数据可视化大屏业务的系统可以很大程度的节省空间位置，参数都是动态化，可以自动计算数据量，中间详情通过数据条数自动布局，角度=360/条数。

雷达图+画像 未做截图

完整代码

github地址： github.com/prettydog/r…