使用SVG和D3.js创建的漏斗统计图

演示  website 下载

介绍

D3.js是一个JavaScript统计图库，用于使用D3.js库绘制基于SVG的可定制漏斗统计图。

使用方法

从CDN加载必要的d3.js。

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

在文档中加载D3 Funnel JS库。

<script src="path/to/d3-funnel.js"></script>

创建一个DIV元素作为漏斗图的容器。

<div id="funnel"></div>

将数据数组添加到漏斗图。

data = [
  ["Applicants",   12000],
  ["Pre-screened", 4000],
  ["Interviewed",  2500],
  ["Hired",        1500]
];

JavaScript在“渠道” DIV元素内绘制默认渠道图表。

var chart = new D3Funnel("#funnel");
chart.draw(data);

配置选项。

var options = {

    chart: {
      width: 350,
      height: 400,
      bottomWidth: 1 / 3,
      bottomPinch: 0,
      inverted: false,
      horizontal: false,
      animate: 0,
      curve: {
          enabled: false,
          height: 20,
          shade: -0.4,
      },
      totalCount: null,
    },
    block: {
      dynamicHeight: false,
      dynamicSlope: false,
      barOverlay: false,
      fill: {
          scale: scaleOrdinal(schemeCategory10).domain(range(0, 10)),
          type: 'solid',
      },
      minHeight: 0,
      highlight: false,
    },
    label: {
      enabled: true,
      fontFamily: null,
      fontSize: '14px',
      fill: '#fff',
      format: '{l}: {f}',
    },
    tooltip: {
      enabled: false,
      format: '{l}: {f}',
    },
    events: {
      click: {
          block: null,
      },
    },

};

chart.draw(data, options);