2017-01-31 16 views
1

で選択バーから要素を取得し、そのようなデータでそれを埋め:私はchart.getSelection()を使用してヒストグラムの選択バーからすべての項目を取得しようとしていますGoogleのチャートは:私は、ヒストグラムを作成したヒストグラム

[ 
['Name of test', 'Runtime of test'], 
['Foo', 123], 
... 
] 

。しかし、私は100以上の要素を含む選択されたバーに対してのみこれを取得しています。

Array[1] 
    0: Object 
    column: 1 
    row: 0 
    ... 
    length: 1 

GoogleヒストグラムのgetSelectionから有用なデータを取得することは可能でしょうか、選択した間隔のようなデータを少なくとも意味しますか?

答えて

0

'select'eventのDataTableがチャート

ノート描画するために使用されるから

を選択したデータのrowcolumnは、データを引っ張って、それらの値を使用して提供しています。両方の何か'select'イベントが発生しますが選択されましたおよびが選択されていません

CK length選択配列の内容にアクセスしようとする前に、
(何かがあるとき、配列は空になります非選択を)

を選択することができます一度に1行しか表示され

複数のシリーズ


作業スニペット以下を参照してください...

を持っている場合と columnにのみ必要とされています

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages:['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Dinosaur', 'Length'], 
 
    ['Acrocanthosaurus (top-spined lizard)', 12.2], 
 
    ['Albertosaurus (Alberta lizard)', 9.1], 
 
    ['Allosaurus (other lizard)', 12.2], 
 
    ['Apatosaurus (deceptive lizard)', 22.9], 
 
    ['Archaeopteryx (ancient wing)', 0.9], 
 
    ['Argentinosaurus (Argentina lizard)', 36.6], 
 
    ['Baryonyx (heavy claws)', 9.1], 
 
    ['Brachiosaurus (arm lizard)', 30.5], 
 
    ['Ceratosaurus (horned lizard)', 6.1], 
 
    ['Coelophysis (hollow form)', 2.7], 
 
    ['Compsognathus (elegant jaw)', 0.9], 
 
    ['Deinonychus (terrible claw)', 2.7], 
 
    ['Diplodocus (double beam)', 27.1], 
 
    ['Dromicelomimus (emu mimic)', 3.4], 
 
    ['Gallimimus (fowl mimic)', 5.5], 
 
    ['Mamenchisaurus (Mamenchi lizard)', 21.0], 
 
    ['Megalosaurus (big lizard)', 7.9], 
 
    ['Microvenator (small hunter)', 1.2], 
 
    ['Ornithomimus (bird mimic)', 4.6], 
 
    ['Oviraptor (egg robber)', 1.5], 
 
    ['Plateosaurus (flat lizard)', 7.9], 
 
    ['Sauronithoides (narrow-clawed lizard)', 2.0], 
 
    ['Seismosaurus (tremor lizard)', 45.7], 
 
    ['Spinosaurus (spiny lizard)', 12.2], 
 
    ['Supersaurus (super lizard)', 30.5], 
 
    ['Tyrannosaurus (tyrant lizard)', 15.2], 
 
    ['Ultrasaurus (ultra lizard)', 30.5], 
 
    ['Velociraptor (swift robber)', 1.8] 
 
    ]); 
 

 
    var options = { 
 
    title: 'Lengths of dinosaurs, in meters', 
 
    legend: { position: 'none' }, 
 
    }; 
 

 
    var chart = new google.visualization.Histogram(document.getElementById('chart_div')); 
 
    google.visualization.events.addListener(chart, 'select', function() { 
 
    var selection = chart.getSelection(); 
 
    if (selection.length) { 
 
     var dinosaur = data.getValue(selection[0].row, 0); 
 
     var dinosaurLength = data.getValue(selection[0].row, selection[0].column); 
 
     console.log(dinosaur + ': ' + dinosaurLength); 
 
    } 
 
    }); 
 
    chart.draw(data, options); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

+0

運をこの質問を? – WhiteHat

0

これが私の仕事:

google.visualization.events.addListener(_this.chart, 'click', clickHandler); 

    function clickHandler(e) { 
     if (e.targetID !== 'chart') { 
      var cli = _this.chart.getChartLayoutInterface(); 
      var bBox = cli.getBoundingBox(e.targetID); 

      var minValue = Math.ceil(cli.getHAxisValue(bBox.left)); 
      var maxValue = Math.round(cli.getHAxisValue(bBox.left + bBox.width)); 

     } 
    } 
関連する問題