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

Question

亚马逊在OpsWorks中的监控工作做得很好（见截图）。您可以随时指向任何区域图表，并查看当时所有图表的所有值。

是否可以通过Google Visualization 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％不透明度来做一些棘手的事情，以便为更高的区域添加背景颜色。但是一般的概念如上所述，取决于你的目标，它也可以起作用。