【问题标题】:Google Chart: Labelling Stacked Column Charts谷歌图表:标记堆积柱形图
【发布时间】:2014-02-19 10:26:48
【问题描述】:

基于 googleAPI 文档: https://developers.google.com/chart/interactive/docs/gallery/columnchart?hl=en

正如您在“标记列”部分中看到的那样,每列都标有一个静态值。我想知道是否可以用所有总和的特定值来标记列。

// Set chart options
     var options = {

         width: 400,
         height: 300,
         calc:????
     };

我应该用特定的功能设置这个“计算”字段吗?

JSFIDDLE: Total Labeling Column

我不知道如何使用每个堆叠列的总和值自定义标签。

【问题讨论】:

    标签: charts google-visualization


    【解决方案1】:

    您可以使用getNumberOfRows()getNumberOfColumns()getValue() 函数来计算总计并设置该值而不是字符串total

    function drawChart() {
        // Create the data table.
        var data = new google.visualization.arrayToDataTable(array);
    
        for (var i = 0; i < data.getNumberOfRows(); i++) {
            var total = 0;
    
            for (var j = 1; j < data.getNumberOfColumns() - 2; j++) {
                // console.log(data.getValue(i, j));
                total += data.getValue(i, j);
            }
            data.setValue(i, data.getNumberOfColumns() - 1, '' + total);
        }
    ...
    

    您必须更改图表的大小或字体的大小才能使值正确显示在列上。标签显示正确。

    【讨论】:

    • 我已经弄清楚了,和你做的差不多。感谢您的及时答复。
    【解决方案2】:

    这是我的答案..我希望它可以帮助遇到同样问题的人。

     function getValueAt(column, dataTable, row) {
         return dataTable.getFormattedValue(row, column);
     }
    
     function setLabelTotal(dataTable) {
         //dataTable must have role: annotation
         var SumOfRows = 0;   
    
         for (var row = 0; row < dataTable.getNumberOfRows(); row++) {
             SumOfRows = 0;
             for (var col = 0; col < dataTable.getNumberOfColumns(); col++) {
    
                 if (dataTable.getColumnType(col) == 'number') {
                     SumOfRows += dataTable.getValue(row, col);
                 }
                 if(dataTable.getColumnRole(col) == 'annotation')
                 {dataTable.setValue(row, col, SumOfRows.toString());}
             }
         }
     } 
    

    请注意,您必须在主函数(例如“drawChart”)上调用这些方法。

    【讨论】: