用D3.js进行医疗数据可视化（四）堆积区图 (Stacked Area Chart)

最新推荐文章于 2024-05-02 19:00:00 发布

慢游

最新推荐文章于 2024-05-02 19:00:00 发布

阅读量5.6k

点赞数

分类专栏： JavaScript D3 文章标签： d3 d3.js 可视化

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

版权

介绍

在之前的文章《用D3.js进行医疗数据可视化（一）折线图》中，我们可以看到对于所可视化的医疗卫生机构诊疗人次数线图，最下部的几条线几乎重合在一起，而且几种机构类型相互包含，关系比较混乱。因此在这篇文章中，我们尝试一下用堆积区图（stackedarea chart）来强调它们之间的对比。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>全国医疗卫生机构医疗服务量</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
    <script type="text/javascript" src="js/d3.min.js"></script>
</head>

<body>

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

    var _width = screen.width * 0.9, _height = 350,
            _margins = {top: 30, left: 50, right: 130, bottom: 70},  //expand margin for legend rendor
            _legendbottom = 30,   //area for legend in Method 2
            _legendright = 100,  //area for legend in Method 1
            _x, _y,
            _names = [],    //keep name list for the chart
            _data = [],
            //_colors = d3.scale.category10(),
            _colors,    //define colors according to name list
            _svg,
            _bodyG,
            _line;

    _chart.render = function () {
        if (!_svg) {
            _svg = d3.select("body").append("div")
            		.style("text-align", "center")
            		.append("svg")
                    .attr("height", _height)
                    .attr("width", _width);

            renderAxes(_svg);

            defineBodyClip(_svg);
        }

        renderBody(_svg);
    };

    function renderAxes(svg) {
        var axesG = svg.append("g")
                .attr("class", "axes");

        renderXAxis(axesG);

        renderYAxis(axesG);
    }
    
    function renderXAxis(axesG){
        var xAxis = d3.svg.axis()
                .scale(_x.range([0, quadrantWidth()]))
                .orient("bottom")
                .tickFormat(d3.time.format("%y年%m月"))  //set tick name in Chinese
                .ticks(d3.time.months, 1);  //set ticks for x axis as monthly

        axesG.append("g")
                .attr("class", "x axis")
                .attr("transform", function () {
                    return "translate(" + xStart() + "," + yStart() + ")";
                })
                .call(xAxis);
                
        /* d3.selectAll("g.x g.tick")
            .append("line")
                .classed("grid-line", true)
                .attr("x1", 0)
                .attr("y1", 0)
                .attr("x2", 0)
                .attr("y2", - quadrantHeight()); */

最低0.47元/天解锁文章

慢游

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
用D3.js进行医疗数据可视化（四）堆积区图 (Stacked Area Chart)

介绍在之前的文章《用D3.js进行医疗数据可视化（一）折线图》中，我们可以看到对于所可视化的医疗卫生机构诊疗人次数线图，最下部的几条线几乎重合在一起，而且几种机构类型相互包含，关系比较混乱。因此在这篇文章我，我们尝试一下用堆积区图（stackedarea chart）来强调它们之间的对比。代码全国医疗卫生机构医疗服务量 fu
复制链接

扫一扫