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

Question

我有一个堆积柱形图，我想在顶部添加一个“总计”标签作为每年的总和。我找到的临时解决方案是将其添加为另一个 { role: 'annotation' } 并删除背景颜色，但它会在实际数据上方留下一个空白。

是否有编写函数来获取要显示的每个堆叠列的总和？

到目前为止，代码如下所示：

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

标签： javascripthtmlcss

Answer 1

I don't know if this is quite what you're looking for (and it is a bit of a hack), but you can take advantage of calculated columns to automatically sum the elements in each row. You can see the full working example in this JSFiddle.

In the example, I've replaced your duplicate entries with calculated columns using view.setColumns to generate annotations (to avoid redundant data). I've used this same technique to generate a calculated column that provides a "grand total" annotation. In order for this column to display correctly, I've added an empty series (i.e., 0) at the end of each row that simply provides a "buffer" between the annotation for series 1 and the "grand total" annotation (if this isn't inserted, the "grand total" annotation tries to associate with column 2, which ruins the formatting). I've generated the grand total using a calculated column that sums values from the previous two.

With the "dummy" column on the end, your data now looks like this:

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

To "hide" the "dummy" column as best I can, I've added the following to your options object:

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

Also, you'll want to change the "dummy" column's color (since it's the color in which the annotation will display) to something other than white (I picked black in my example).

Lastly, you'll need to use a DataView to take advantage of calculated columns. The DataView then becomes the object passed to draw, as follows:

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