如何创建比例堆积列?

时间:2014-01-30 08:45:15

标签: javascript charts google-visualization google-chartwrapper

我有一个堆叠列的脚本,我想让每个条形成比例,条形区域内有标签。我怎么能这样做?我尝试了一些编辑,但它不起作用。我目前正在使用Google Chart。请帮我。感谢。

这是脚本:

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 options = {
            title:"Yearly Coffee Consumption by Country",
            width:1000, height:400,
            isStacked: true,
            hAxis: {title: "Year"}
            };
var chart = new    google.visualization.ColumnChart(document.getElementById('visualization'));
        chart.draw(data,options);

}

google.setOnLoadCallback(drawVisualization);

如果我的数据是字符串/文本怎么办?如何在图表中放置标签并使其成比例?有可能吗?

示例数据:

['Year', 'Austria', 'Belgium', 'Germany'],
['2003',  AB,   BA,      CA],
['2004',  AC,   BB,    CB],
['2005',  AD,   BC, CC]

1 个答案:

答案 0 :(得分:1)

使用DataView计算每个单元格的比例总计,并创建注释以标记条形:

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);

请参阅此处的示例:http://jsfiddle.net/asgallant/ukRPd/