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

最新推荐文章于 2023-03-09 15:22:51 发布

慢游

最新推荐文章于 2023-03-09 15:22:51 发布

阅读量6k

点赞数

分类专栏： JavaScript D3 文章标签： d3 可视化医疗

本文链接：https://blog.csdn.net/eengel/article/details/47258899

版权

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

摘要由CSDN通过智能技术生成

介绍

经过一系列对折线图的试验，这儿就来尝试一下用饼图（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("

最低0.47元/天解锁文章

慢游

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
用D3.js进行医疗数据可视化（五）饼图 (Pie Chart)

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

扫一扫