在给定时间显示堆叠面积图中的所有值

Question

亚马逊在OpsWorks的监控方面做得很好(见截图)。您可以在任何时间指向任何面积图，并在该时间查看所有图表的所有值。

有没有可能用Google可视化API实现类似的功能？

我也有多个(堆叠的)面积图，指向每个数据点以获得精确值是一件很痛苦的事情。其中一些是重叠的或非常接近的。

​

​

Answer 1

您不能同时触发所有图表中的工具提示，但如果您禁用内置的工具提示，您可以通过在HTML中构建工具提示并在"onmouseover“事件处理程序中手动填充它们来实现类似的操作：

function mouseOverHandler (e) {
    // use e.row, e.column to find data and populate your tooltips
}
function mouseOutHandler (e) {
    // clear the tooltips
}
google.visualization.events.addListener(chart1, 'onmouseover', mouseOverHandler);
google.visualization.events.addListener(chart1, 'onmouseout', mouseOutHandler);
google.visualization.events.addListener(chart2, 'onmouseover', mouseOverHandler);
google.visualization.events.addListener(chart2, 'onmouseout', mouseOutHandler);
// etc...

在堆叠面积图中(假设您不用自定义解决方案替换工具提示)，可以将focusTarget选项设置为'category'，以使给定x轴值的所有值都显示在工具提示中(仅适用于一个图表，不适用于所有图表)。

Answer 2

您还可以通过将所有三个图表放在同一个图表元素中来作弊，但有一些技巧(和一些限制)。例如，您可以这样制作图表：

​

​

下面是(虚拟数据)的代码：

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'time');
  data.addColumn('number', 'used');
  data.addColumn('number', 'cached');
  data.addColumn('number', 'free');
  data.addColumn('number', 'user');
  data.addColumn('number', 'system');
  data.addColumn('number', 'io wait');
  data.addColumn('number', '1 min');
  data.addColumn('number', '5 min');
  data.addColumn('number', '15 min');
  data.addRows([
    [1, {v:0.1, f:'10%'},{v:0.55, f:'45%'},{v:1, f:'45%'},{v:1.01, f:'0.15 GiB'},{v:1.83, f:'12.45 GiB'},{v:1.18, f:'2.7 GiB'},{v:2.28166561658701, f:'28.2%'},{v:2.38024858239246, f:'38.0%'},{v:2.42249842488051, f:'42.2%'}],
    [2, {v:0.2, f:'20%'},{v:0.6, f:'40%'},{v:1, f:'40%'},{v:1.54, f:'8.1 GiB'},{v:1.47, f:'7.05 GiB'},{v:1.77, f:'11.55 GiB'},{v:2.53503269167234, f:'53.5%'},{v:2.74904576834128, f:'74.9%'},{v:2.4119751725877, f:'41.2%'}],
    [3, {v:0.3, f:'30%'},{v:0.65, f:'35%'},{v:1, f:'35%'},{v:1.13, f:'1.95 GiB'},{v:1.15, f:'2.25 GiB'},{v:1.75, f:'11.25 GiB'},{v:2.73464579773048, f:'73.5%'},{v:2.85218912536736, f:'85.2%'},{v:2.80811037750353, f:'80.8%'}],
    [4, {v:0.4, f:'40%'},{v:0.7, f:'30%'},{v:1, f:'30%'},{v:1.27, f:'4.05 GiB'},{v:1.86, f:'12.9 GiB'},{v:1.1, f:'1.5 GiB'},{v:2.86045009159487, f:'86.0%'},{v:2.92068159800651, f:'92.1%'},{v:2.54208355770477, f:'54.2%'}],
    [5, {v:0.5, f:'50%'},{v:0.75, f:'25%'},{v:1, f:'25%'},{v:1.23, f:'3.45 GiB'},{v:1.12, f:'1.8 GiB'},{v:1.88, f:'13.2 GiB'},{v:2.89980619585711, f:'90.0%'},{v:2.8728120099814, f:'87.3%'},{v:2.75583720451997, f:'75.6%'}],
    [6, {v:0.6, f:'60%'},{v:0.8, f:'20%'},{v:1, f:'20%'},{v:1.5, f:'7.5 GiB'},{v:1.78, f:'11.7 GiB'},{v:1.26, f:'3.9 GiB'},{v:2.84876005903125, f:'84.9%'},{v:2.66203284604438, f:'66.2%'},{v:2.63657004427344, f:'63.7%'}],
    [7, {v:0.7, f:'70%'},{v:0.85, f:'15%'},{v:1, f:'15%'},{v:1.91, f:'13.65 GiB'},{v:1.26, f:'3.9 GiB'},{v:1.69, f:'10.35 GiB'},{v:2.71244021344925, f:'71.2%'},{v:2.78368423479417, f:'78.4%'},{v:2.69819140918026, f:'69.8%'}],
    [8, {v:0.8, f:'80%'},{v:0.9, f:'10%'},{v:1, f:'10%'},{v:1.48, f:'7.2 GiB'},{v:1.51, f:'7.65 GiB'},{v:1.41, f:'6.15 GiB'},{v:2.50454251895529, f:'50.5%'},{v:2.59031474717769, f:'59.0%'},{v:2.33299806251049, f:'33.3%'}],
    [9, {v:0.9, f:'90%'},{v:0.95, f:'5%'},{v:1, f:'5%'},{v:1.18, f:'2.7 GiB'},{v:1.53, f:'7.95 GiB'},{v:1.97, f:'14.55 GiB'},{v:2.24595415946281, f:'24.6%'},{v:2.24103507627355, f:'24.1%'},{v:2.22381828511115, f:'22.4%'}],
    [10, {v:1, f:'100%'},{v:1, f:'0%'},{v:1, f:'0%'},{v:1.66, f:'9.9 GiB'},{v:1.61, f:'9.15 GiB'},{v:1.2, f:'3 GiB'},{v:2.1229770797314, f:'12.3%'},{v:2.13527478770454, f:'13.5%'},{v:2.14757249567768, f:'14.8%'}],
  ]);

  // Create and draw the visualization.
  var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
  ac.draw(data, {
    title : 'Monthly Coffee Production by Country',
    isStacked: false,
    width: 600,
    height: 400,
    areaOpacity: 0.0,
    focusTarget: 'category',
    series: { 0: {areaOpacity: 0.5}, 1: {areaOpacity: 0.5}, 2: {areaOpacity: 0.5} },
    vAxis: { ticks: [{v:0, f:""}, {v:0.5, f:"7.5 GiB"}, {v:1, f:"15.0 GiB"}, {v:1.5, f:"50%"}, {v:2, f:"100%"}, {v:2.5, f:"50%"}, {v:3, f:"100%"}, ] }
  });
}

基本上，我将所有3个序列放在同一张图表上，将它们都作为图表的1/3的百分比。所以第一个序列是0-1，第二个序列是1-2，第三个序列是2-3。然后，我使用大量的{v:, f:}表示法使它们看起来像不同的数字(特别是对于GiB )，并使用ticks选项使轴看起来像有3个刻度。最后，我设置了focusTarget: 'category'，当你将鼠标移到任何一行上时，所有的行都会被选中。

你可以格式化颜色，甚至添加虚拟系列，以便在系列之间添加更粗的黑线，如果你想让它们看起来更“独特”的话。你也可以用虚拟系列和白色区域和100%不透明度来做一些棘手的事情，可能会给更高的区域添加背景颜色。但一般的概念如上所述，取决于你要做的是什么，它也可以工作。