用D3.js进行医疗数据可视化（五）饼图 (Pie Chart)

最新推荐文章于 2026-05-04 12:05:50 发布

原创

最新推荐文章于 2026-05-04 12:05:50 发布 · 6.4k 阅读

标签

#d3 #可视化 #医疗

本文介绍了如何使用D3.js创建医疗数据的饼图，以直观展示各医疗机构月均诊疗人次数的比例。通过饼图，可以清晰看出三级医院的诊疗人次数远超基层医疗机构。

介绍

经过一系列对折线图的试验，这儿就来尝试一下用饼图（Pie Chart）来做医疗数据的可视化。在《用D3.js进行医疗数据可视化（四）堆积区图(Stacked Area Chart)》的图2中，我们见识了每种医疗机构每月院均诊疗人次数（人次）的比较。其实对于一组数据间的比较，用饼图是非常适合的：它可以直观地看到每种数据占总体的比例，以及相对于其他组数据孰大孰小。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pie Chart</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
    <script type="text/javascript" src="js/d3.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
</head>

<body>

<script type="text/javascript">
    function pieChart() {
        var _chart = {};

        var _width = 650, _height = 500,
                _data = [],
                _colors, // = d3.scale.category10(),
                _names = [],    //keep name list for the chart
                _svg,
                _bodyG,
                _pieG,
                _radius = 200,
                _innerRadius = 100;

        _chart.render = function () {
            if (!_svg) {
                _svg = d3.select("body").append("svg")
                        .attr("height", _height)
                        .attr("width", _width);
            }

            renderBody(_svg);
        };

        function renderBody(svg) {
            if (!_bodyG)
                _bodyG = svg.append("g")
                        .attr("class", "body");

            renderPie();
        }

        function renderPie() {