如何在 Google Chart 中轻松创建比例堆积柱形图？以及如何组合两个图表？

Question

请帮助我，我是谷歌图表脚本的新手。你能给我正确的堆积比例柱形图脚本吗？谷歌图表中没有复杂的代码？以及如何组合两个图表......如果你能帮助我，我很高兴。谢谢

这是组合图表的示例照片：

下面是复杂代码的堆积比例柱形图脚本：

 function drawVisualization() {

 var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
    ['2003',  1336060,   3817614,       974066,       1104797,   6651824,  15727003],
    ['2004',  1538156,   3968305,       928875,       1151983,   5940129,  17356071],
    ['2005',  1576579,   4063225,       1063414,      1156441,   5714009,  16716049],
    ['2006',  1600652,   4604684,       940478,       1167979,   6190532,  18542843],
    ['2007',  1968113,   4013653,       1037079,      1207029,   6420270,  19564053],
    ['2008',  1901067,   6792087,       1037327,      1284795,   6240921,  19830493]
  ]);

  var view  = new google.visualization.DataView(data);

  var columns = [0];
  for (var i = 1; i < data.getNumberOfColumns(); i++) {
    // add a column that calculates the proportional value of this column to the total
    columns.push({
        type: 'number',
        label: data.getColumnLabel(i),
        calc: (function (col) {
            return function (dt, row) {
                var val = dt.getValue(row, col);
                var total = 0;
                for (var j = 1; j < dt.getNumberOfColumns(); j++) {
                    total += dt.getValue(row, j);
                }
                return (total == 0) ? null : {v: val / total, f: val.toString()}; 
            };
        })(i)
    });
    // add an annotation column that puts a label on the bar
    columns.push({
        type: 'string',
        role: 'annotation',
        sourceColumn: i,
        calc: 'stringify'
    });
}

view.setColumns(columns);

var options = {
    title:"Yearly Coffee Consumption by Country",
    width:1000, height:400,
    isStacked: true,
    hAxis: {title: "Year"},
    vAxis: {
        format: '#%'
    }
};
var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
chart.draw(view, options);

 }
google.load('visualization', '1', {packages:['corechart'], callback: drawVisualization});

Answer 1

columns 是一个列定义数组，DataView 使用它来设置图表使用的数据。在这种情况下，代码会创建一堆计算列，这些列计算特定列所代表的每一行中总和的百分比。这段代码：

columns.push({
    type: 'number',
    label: data.getColumnLabel(i),
    calc: (function (col) {
        return function (dt, row) {
            var val = dt.getValue(row, col);
            var total = 0;
            for (var j = 1; j < dt.getNumberOfColumns(); j++) {
                total += dt.getValue(row, j);
            }
            return (total == 0) ? null : {v: val / total, f: val.toString()}; 
        };
    })(i)
});

向使用calc 方法计算百分比的定义添加一列。此函数的返回值是一个对象，其v 属性表示要绘制图表的值（百分比），其f 属性表示要在工具提示中显示的字符串值。

这段代码：

columns.push({
    type: 'string',
    role: 'annotation',
    sourceColumn: i,
    calc: 'stringify'
});

为columns数组添加一个注释列，为每一列添加一个标签。