Google 可视化堆叠面积图：将总计添加到工具提示答案

【问题标题】：Google visualization stacked area chart: Add total to tooltipGoogle 可视化堆叠面积图：将总计添加到工具提示
【发布时间】：2020-12-04 03:10:47
【问题描述】：

我正在使用 google 可视化 api 创建堆积面积图。当用户将鼠标悬停在图表内的某个点上时，我希望它显示该位置的点的总和以及这些点的值。

第二点，我可以通过指定选项focusTarget: 'category'轻松实现。我希望以类似的外观和感觉在工具提示中为total 多添加一行。

我尝试通过添加一个名为Total 的额外列来实现这一点，该列的值为0，但工具提示等于总和。然而，这会为图例和图表本身添加一条空线，这在视觉上并不吸引人。

我觉得这应该是开箱即用的东西，但我找不到任何解决这个问题的方法。

如果有人知道解决此问题的好方法，请回答。提前致谢。

【问题讨论】：

您能详细说明您是如何设置工具提示的吗？我遇到了麻烦，代码会有所帮助。

标签： javascript charts google-visualization

【解决方案1】：

由于您已经有了总计列，您可以使用系列选项使该行消失并从图例中删除总计：

series: {
    <series index of the total>: {
         lineWidth: 0,
         pointSize: 0,
         visibleInlegend: false
    }
}

我建议将总列设为您的第一个数据系列（列索引 1，系列索引 0），因为这会将其置于图表底部，不会干扰您的其他系列。

【讨论】：

虽然它看起来有点像黑客，但它做得很好。谢谢

【解决方案2】：

我遇到了同样的问题，并在我即将发布自己的问题时找到了这个问题和答案。

不过，我可以通过使用 ComboChart 来改进这一点。我将总数放在一行中（根据@asgallant 的回答被隐藏了），所以我可以在那里使用实际值而不是 0。

这是一个例子：

    google.charts.load('current', {'packages':['corechart'], 'language': 'nl'});
    google.charts.setOnLoadCallback(drawChart5);
    function drawChart5() {
      var data = google.visualization.arrayToDataTable([["","Totaal","Appels","Peren","Bananen","schatting"],[new Date(2020, 11, 1),2015,1223,614,178,null],[new Date(2020, 11, 2),1663,929,572,162,null],[new Date(2020, 11, 3),1449,570,429,127,323]]);
      var options = { title: 'Consumptie per dag, december 2020',
                      titleTextStyle: { fontSize: 15 },
                      type: 'columns',
                      width: 426,
                      height: 240,
                      legend: { position: 'bottom' },
                      series: { 0: { type: 'line', color: '#fff', lineWidth: 0, pointSize: 0, visibleInLegend: false }, 1: { color: '66aabb' }, 2: { color: '66ddee' }, 3: { color: 'bbeeff' }, 4: { color: 'e8f8ff' } },
                      vAxis: { viewWindowMode: 'maximized' },
                      chartArea: { width: '90%', left: 60, right: 20 },
                      bar: { groupWidth: '80%' },
                      focusTarget: 'category',
                      isStacked: true };
      var chart = new google.visualization.ComboChart(document.getElementById('chart5'));
      chart.draw(data, options);
    }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div style="display: inline-block; width: 426px; height: 240px;" id="chart5"></div>

【讨论】：