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

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

是否有可能实现与谷歌可视化API类似的功能

我也有多个（堆叠）面积图，指出每个数据点以获得准确值是一件痛苦的事情。其中一些重叠或非常紧密

---

您不能同时触发所有图表中的工具提示，但如果禁用内置工具提示，您可以通过在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轴值的所有值显示在工具提示中（仅在一个图表内有效，而不跨图表）.

您还可以通过使用一些技巧（以及一些限制）将所有三个图表放在同一个图表元素中来作弊。例如，您可以这样制作图表：

以下是该（虚拟数据）的代码：

基本上，我把所有3个系列放在同一张图表上，把它们都放在图表的1/3的百分比中。第一个系列是0-1，第二个系列是1-2，第三个系列是2-3。然后，我使用了大量的

{v:，f:}

符号使它们看起来像不同的数字（特别是GiB），并使用

ticks

选项使轴看起来像有3个刻度。最后，我设置了

focusTarget:'category'

，这样当您将鼠标移到任何行上时，所有行都会被选中

您可以格式化颜色，甚至添加虚拟系列，以便在系列之间添加更粗的黑线，如果您希望使它们看起来更“独特”。您还可以使用虚拟系列和白色区域以及100%不透明度来进行一些棘手的操作，以便为更高的区域添加背景色。但总体概念如上所述，取决于你的目标，它也可以起作用

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%"}, ] }
  });
}