Question

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

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

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

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

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

Answer 1

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

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

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

Answer 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>

Google可视化堆积区域图表：向工具提示添加总计

2 个答案: