July 25, 2017

面积图(Area Graph)

面积图(Area Graph)

译自:http://www.datavizcatalogue.com/methods/area_graph.html

Description

面积图(Area Graph)是折线图(Line Graph)的一种,但是其折线下方的区域会被填充上颜色或纹理。绘制面积图,首先需要在笛卡尔坐标系内绘制数据点,然后连接所有数据点,最后填充折线下方的空间。

面积图有两种比较流行的变种:分组面积图和堆叠面积图。分组面积图都是从零开始的,而堆叠面积图则是从前一个系列数据上开始的。

与折线图一样,面积图通常用于展现一个时间段内的数值的变化态势。他们的表现重点通常是趋势而非具体的数值。

Anatomy

D3

area-d3

CSS:

.line {
  fill: none;
  stroke: #139AAB;
  stroke-width: 2px;
}

.area {
  fill: rgba(77, 153, 187, 0.5);
}

.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}

Javascript:

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// set the ranges
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// define the area
var area = d3.area()
                .x(function(d) { return x(d.interval); })
                .y0(height)
                .y1(function(d) { return y(d.value); });

// define the line
var valueline = d3.line()
                    .x(function(d) { return x(d.interval); })
                    .y(function(d) { return y(d.value); });

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body")
                .append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// get the data
d3.csv("area.csv", function(error, data) {
    if (error) throw error;
    // scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.interval; }));
    y.domain([0, d3.max(data, function(d) { return d.value; })]);
    // add the X gridlines
    svg.append("g")
        .attr("class", "grid")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x).ticks(5).tickSize(-height).tickFormat(""))
    // add the Y gridlines
    svg.append("g")
        .attr("class", "grid")
        .call(d3.axisLeft(y).ticks(5).tickSize(-width).tickFormat(""))
    // add the area
    svg.append("path")
        .data([data])
        .attr("class", "area")
        .attr("d", area);
    // add the valueline path.
    svg.append("path")
        .data([data])
        .attr("class", "line")
        .attr("d", valueline);
    // add line
    svg.selectAll("dot")
        .data(data)
        .enter()
        .append("circle")
        .attr("r", 3.5)
        .attr("cx", function(d) { return x(d.interval); })
        .attr("cy", function(d) { return y(d.value); });
    // add the X Axis
    svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));
    // add the Y Axis
    svg.append("g")
        .call(d3.axisLeft(y));
});

Data:

interval,value
0,0
1,2
2,4
3,3
4,6
5,5
6,2
7,0

Source: https://jsfiddle.net/imcmy/a7b0u76r/

Echarts

area-echarts

var chart = echarts.init(document.getElementById('main'));

var interval = [0, 1, 2, 3, 4, 5, 6, 7]
var value = [0, 2, 4, 3, 6, 5, 2, 0];

option = {
    tooltip: {
        trigger: 'axis',
        position: function (pt) {
            return [pt[0], '10%'];
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: interval
    },
    yAxis: {
        type: 'value',
    },
    series: [
        {
            name:'interval',
            type:'line',
            itemStyle: {
                normal: {
                    color: 'rgba(19, 154, 171, 0.4)'
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 1,
                        color: 'rgb(153, 255, 204)'
                    }, {
                        offset: 0,
                        color: 'rgb(77, 153, 187)'
                    }])
                }
            },
            data: value
        }
    ]
};

chart.setOption(option);

Source: https://jsfiddle.net/imcmy/hc0jygsg/