你如何在每个堆积柱形图（谷歌图表）上编码一个总计？

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