1

亚马逊在 OpsWorks 的监控方面做得很好（见截图）。您可以随时指向任何面积图并查看当时所有图表的所有值。

是否可以使用 Google Visualization API 实现类似的功能？

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

Amazon OpsWorks 监控图表

4

2 回答 2

0

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

于 2013-11-05T15:37:02.783 回答
0

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

示例图表

这是该代码（虚拟数据）：

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% 不透明度来做一些棘手的事情，以潜在地将背景颜色添加到更高的区域。但是一般概念如上所述，取决于您的目标，它也可以工作。

于 2013-11-06T05:32:39.213 回答