Question

我创建了直方图并用这样的数据填充它：

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

我正在尝试使用chart.getSelection()从所选直方图栏中获取所有项目。但是我只选择了包含100多个元素的选定栏。

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

是否可以从Google Histogram的getSelection中获取任何有用的数据，我的意思是至少选择间隔等数据？

Answer 1

'select' event提供所选数据的row和column

使用这些值从用于绘制图表的DataTable中提取数据

注意： {<1}}事件会在选择和未选中时触发

在尝试访问选择阵列的内容之前，请务必检查'select' （当某些内容未选中时，该数组将为空）

它似乎一次只能选择一行

仅当您有多个系列

时才需要

和length

请参阅以下工作代码段...

＆＃13;

column

＆＃13;

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);
}

＆＃13;

Answer 2

这对我有用：

 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));

        }
    }

Google Charts：从直方图中的选定栏中获取元素

2 个答案: