July 27, 2017

柱状图(Bar Chart)

柱状图(Bar Chart)

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

Description

柱状图(Bar Chart,Bar Graph或Column Graph)会使用水平或竖直的柱形来比较不同类别之间离散数值。其中一个轴用来表示具体的类别,另一个轴则用来表示离散的数值的范围。

柱状图不同于直方图。直方图表现的是一个时间段内的发展过程,而柱状图表现的是每个类别的数值,其回答的是这一类别有多少的问题。

柱状图的主要缺陷在于当类别很多时,在坐标轴上标识类别会变的很麻烦。

Anatomy

D3

bar-d3

Javascript:

var colors = ["#22B573", "#00A99D", "#00859D"]

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 660 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var x = d3.scaleLinear().rangeRound([0, width]),
    y = d3.scaleBand().rangeRound([0, height]).padding(.2);

var g = 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 + ")");

d3.csv("bar.csv", function(error, data) {
    if (error) throw error;

    x.domain([0, d3.max(data, function(d) { return d.value; })]);
    y.domain(data.map(function(d) { return d.category; }));

    g.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .attr("x", 0)
        .attr("y", function(d) { return y(d.category); })
        .attr("width", function(d) { return x(d.value); })
        .attr("height", y.bandwidth())
        .attr("fill", function(d, i) {return colors[i]});

    g.selectAll("text.bar")
        .data(data)
        .enter().append("text")
        .attr("x", function(d) { return x(d.value) - 20; })
        .attr("y", function(d) { return y(d.category) + y.bandwidth() / 2; })
        .text(function(d) { return d.value; })
        .attr("text-anchor", "end")
        .attr("fill", "white")
        .attr("dy", ".4em")
        .style("font-size", "15px");

    g.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x).ticks(d3.max(data, function(d) { return d.value; }), ",f"));

    g.append("g")
        .call(d3.axisLeft(y).tickSizeInner(-6))
        .selectAll("text")
        .attr("y", 0)
        .attr("x", 9)
        .attr("dy", ".4em")
        .attr("fill", "white")
        .style("text-anchor", "start")
        .style("font-size", "15px");
});

Data:

category,value
Category A,6
Category B,2.5
Category C,4

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

Echarts

bar-echarts

Javascript:

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

option = {
    xAxis : [
        {
            type : 'value'
        }
    ],
    yAxis : [
        {
            type : 'category',
            data : ['Category A', 'Category B', 'Category C'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    series : [
        {
            type:'bar',
            barWidth: '60%',
            data:[6, 2.5, 4],
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            itemStyle: {
                normal:{
                    color: function (params) {
                        var colorList = ["#22B573", "#00A99D", "#00859D"];
                        return colorList[params.dataIndex];
                    }
                }
            }
        }
    ]
};

chart.setOption(option);

Source: https://jsfiddle.net/imcmy/4ce04uno/