Как сделать линию кликабельной на линейной диаграмме Google

Я хочу сделать линейную диаграмму Google с интерактивными линиями, но, похоже, я могу сделать только точки данных интерактивными. Можно ли также сделать линию между точками данных кликабельной?


javascript google-visualization linechart linegraph clickable
person Rob    schedule 06.07.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

использовать параметр конфигурации focusTarget: 'category'

при нажатии на линию будет выбрана ближайшая точка.

хотя в моем текущем браузере я должен удерживать точку мыши,
~ 2 пикселя над линией, прежде чем я смогу щелкнуть.

но он работает по сравнению с focusTarget: 'datum',
который позволяет щелкнуть только точку

см. следующий рабочий фрагмент...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y');
    data.addRows([
      [0, 0],
      [6, 11],
      [12, 30],
      [18, 52],
      [24, 60],
      [30, 55],
      [36, 62],
      [42, 63],
      [48, 72],
      [54, 71],
      [60, 64],
      [66, 70]
    ]);

    // clickable line
    new google.visualization.LineChart(document.getElementById('chart_div0')).draw(data, {
      focusTarget: 'category'
    });

    // point only
    new google.visualization.LineChart(document.getElementById('chart_div1')).draw(data, {
      focusTarget: 'datum'
    });
  },
  packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>click line</div>
<div id="chart_div0"></div>
<div>point only</div>
<div id="chart_div1"></div>

ИЗМЕНИТЬ

если focusTarget: 'category' не сработает,
другим вариантом будет использование 'click' событие

хотя ничего не сфокусировано и не отображается всплывающая подсказка, строка по-прежнему доступна для щелчка.
но местоположение щелчка должно быть достаточно точным.
вы можете использовать targetID, чтобы определить, какая / какая строка была нажата...

см. следующий фрагмент...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X0');
    data.addColumn('number', 'Y0');
    data.addColumn('number', 'Y1');
    data.addRows([
      [0, 0, 0],
      [6, 11, 7],
      [12, 30, 13],
      [18, 52, 19],
      [24, 60, 25],
      [30, 55, 31],
      [36, 62, 37],
      [42, 63, 43],
      [48, 72, 49],
      [54, 71, 55],
      [60, 64, 61],
      [66, 70, 67]
    ]);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div1'));

    google.visualization.events.addListener(chart, 'click', function (props) {
      if (props.targetID.indexOf('line') > -1) {
        var hAxis = chart.getChartLayoutInterface().getHAxisValue(props.x);
        var vAxis = chart.getChartLayoutInterface().getVAxisValue(props.y);
        document.getElementById('chart_div0').innerHTML = props.targetID + ' clicked at [' + hAxis + ', ' + vAxis + ']';
      }
    });

    chart.draw(data, {
      lineSize: 3,
      pointSize: 5
    });
  },
  packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div0">line click result shown here</div>
<div id="chart_div1"></div>

person WhiteHat    schedule 06.07.2016
comment
Это именно то, что мне нужно. Спасибо, Уайтхэт. - person Rob; 06.07.2016
comment
Черт, только что попробовал это на моем коде, и похоже, что это не совсем то, что я ищу. У меня есть несколько строк, и это показывает категории для всех строк одновременно. Я планирую иметь разные действия щелчка для каждой строки. Извините, я должен был быть более ясным. - person Rob; 06.07.2016
comment
это недостаток, и он неизбежен с focusTarget: 'category'. см. EDIT для другого варианта... - person WhiteHat; 06.07.2016