1

Amazon は、OpsWorks での監視で素晴らしい仕事をしました (スクリーンショットを参照)。任意の面グラフをいつでもポイントして、その時点のすべてのグラフのすべての値を表示できます。

Google Visualization API で同様のことを達成することは可能ですか?

また、複数の (積み上げ) 面グラフがあり、正確な値を取得するために各データポイントをポイントするのは面倒です。それらのいくつかは重なり合っているか、非常に接近しています。

Amazon OpsWorks モニタリング チャート

4

2 に答える 2

0

また、3 つのグラフすべてを同じグラフ要素に入れることでごまかすこともできますが、ちょっとしたトリック (およびいくつかの制限) があります。たとえば、次のようなチャートを作成できます。

サンプルチャート

そのためのコードは次のとおりです（ダミーデータ）：

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 から、2 番目は 1-2 から、3 番目は 2-3 からです。次に、自由な量の{v:, f:}表記を使用して、それらが異なる数値のように見えるようにし (特に GiB の場合)、ticksオプションを使用して、軸が 3 つのスケールを持っているように見せました。最後に、focusTarget: 'category'マウスオーバーするとすべての行が選択されるように設定します。

色をフォーマットしたり、ダミー シリーズを追加して、シリーズ間に太い黒線を追加したりして、それらをより「明確に」見せることができます。また、ダミー シリーズと白い領域と 100% の不透明度を使用して、より高い領域に背景色を追加する可能性のあるトリッキーなことを行うこともできます。ただし、一般的な概念は上で概説したとおりであり、目的によっては、それも機能する可能性があります。

于 2013-11-06T05:32:39.213 に答える
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...

積み上げ面グラフ (ツールヒントをカスタム ソリューションに置き換えない場合)で、特定の x 軸値のすべての値をツールヒントに表示するfocusTargetオプションを設定できます (複数のグラフではなく、1 つのグラフ内でのみ機能します)。'category'チャート）。

于 2013-11-05T15:37:02.783 に答える