5

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

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

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

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

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

4

2 回答 2

7

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

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

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

于 2013-09-09T14:44:50.753 回答
0

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

不过，我可以通过使用 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>

于 2020-12-03T19:10:47.390 回答