你如何在每個堆積柱形圖（谷歌圖表）上編碼一個總計？

Question

我有一個堆積柱形圖，我想在頂部添加一個“總計”label 作為每年的總和。 我找到的臨時解決方案是將其添加為另一個 { role: 'annotation' } 並刪除背景顏色，但它會在實際數據上方留下一個空白。

是否有代碼為 function 獲取要顯示的每個堆疊列的總和？

到目前為止，代碼如下所示：

function drawChart() {
            // Define the chart to be drawn.
  
            var data = google.visualization.arrayToDataTable([
               ['Year', 
                'Gangs', { role: 'annotation' },
                'No Gangs', { role: 'annotation' },
                'Total', { role: 'annotation' },
               ],
               ['2012',  110,110, 488,488, 590,590],
               ['2013',  110, 110,488,488,598,598],
             ['2014',  114,114, 522,522,590,590],
               ['2015',  85,85, 521,521,590,590],
               ['2016',  82,82, 590,590,590,590],
               ['2017',  79, 79,  548, 548,590,590], 
               ['2018',  49, 49,  432,432,590,590], 
               ['2018',  41, 41, 524, 524,590,590],
            ]);

          
            var options = {title: 'Violent Crimes by Gang Rates',
                           vAxis: {title: 'Violent Deaths'},
                           vAxis:{maxValue: 800},
                            seriesType: 'bars',
                          //series: {2: {type: 'line'}},
                           colors: ['#1586DB', '#E37D24', '#fff'],
                           legend: {position: 'bottom', maxLines: 3},
                           isStacked:true};  
   
   
   //test
   
  var totalSeries;

            // Instantiate and draw the chart.
            var chart = new google.visualization.ColumnChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);

Answer 1

我不知道這是否正是您要尋找的（這有點像 hack），但您可以利用計算列來自動對每行中的元素求和。 您可以在此 JSFiddle中查看完整的工作示例。

在示例中，我使用view.setColumns將重復條目替換為計算列以生成注釋（以避免冗余數據）。 我已經使用相同的技術來生成提供“總計”注釋的計算列。 為了使該列正確顯示，我在每一行的末尾添加了一個空系列（即0 ），它只是在系列 1 的注釋和“總計”注釋之間提供了一個“緩沖區”（如果這未插入，“總計”注釋嘗試與第 2 列關聯，這會破壞格式）。 我使用計算列生成了總計，該計算列對前兩個值求和。

使用末尾的“虛擬”列，您的數據現在如下所示：

var data = google.visualization.arrayToDataTable([
    ['Year',
     'Gangs',
     'No Gangs',
     '' // our "dummy" column
    ],
    ['2012', 110, 488, 0],
    ['2013', 110, 488, 0],
    ['2014', 114, 522, 0],
    ['2015', 85, 521, 0],
    ['2016', 82, 590, 0],
    ['2017', 79, 548, 0],
    ['2018', 49, 432, 0],
    ['2018', 41, 524, 0],
]);

為了盡可能“隱藏”“虛擬”列，我在您的options object 中添加了以下內容：

series: {
    2: {
       enableInteractivity: false,
       visibleInLegend: false,
       annotations: {
           stem: {
               length: 0
           }
       }
    }
}

此外，您需要將“虛擬”列的顏色（因為它是顯示注釋的顏色）更改為白色以外的顏色（我在示例中選擇了黑色）。

最后，您需要使用DataView來利用計算列。 然后DataView變成了 object 傳遞給draw ，如下所示：

var view = new google.visualization.DataView(data);
view.setColumns([
    0, 1, // Displays columns 0 and 1 normally
    { // "Calculates" an annotation for column 1 and displays immediately after that column
        calc: "stringify",
        sourceColumn: 1,
        type: "string",
        role: "annotation"
    },
    2, // Displays column 2 normally
    {
        calc: "stringify",
        sourceColumn: 2,
        type: "string",
        role: "annotation"
    }, // "Calculates" column 2 annotation
    3, // Displays our dummy column for the purposes of preventing the following annotation from associating with column 2
    { // Computes a "grand total" by summing the values from columns 1 and 2
        calc: (table, row) => (table.getValue(row, 1) + table.getValue(row, 2)).toString(),
        type: "string",
        role: "annotation"
    },
]);
      
// Instantiate and draw the chart.
var chart = new google.visualization.ColumnChart(document.getElementById('container'));
chart.draw(view, options);