Установить одну точку в качестве активной / показать точку и всплывающую подсказку на линейном графике Google - PullRequest
Новая
       8

Установить одну точку в качестве активной / показать точку и всплывающую подсказку на линейном графике Google

0 голосов
/ 07 февраля 2019

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

Мое текущее решение состоит в том, чтобы показать все точки и увеличить размер для конкретной точки, но на самом деле я хочусохранить функциональность видения точек при наведении на них. 

if (!intercept && oldVal > newVal) {
      intercept = true
      point = 'point { size: 10; }'
    }
data.push([i + 1, oldVal, newVal, point])

1 Ответ

0 голосов
/ 07 февраля 2019

похоже, что вы на правильном пути с размером точки.

мы должны установить для параметра конфигурации pointSize значение больше нуля,
, чтобы иметь возможность установить размер в нашем столбце стилей.
, но мы можем использовать что-то вроде -> pointSize: 0.1
, чтобы другие точки не были видны.

Что касается всплывающей подсказки, мы можем установить для параметра tooltip.trigger либо ...
'selection', либо 'both' 

tooltip: {
  trigger: 'both'
}

, затем мы можем использовать диаграмму 'ready' событие,
для установки выбора графика 

google.visualization.events.addListener(chart, 'ready', function () {
  chart.setSelection([{row: intercept, column: 2}]);
});

с указанным выше параметром trigger, когда мы устанавливаем выбор графика,
подсказка автоматически появится.

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Old');
  data.addColumn('number', 'New');
  data.addColumn({type: 'string', role: 'style'});

  var intercept = null;
  var rows = new Array(10);
  $.each(rows, function (i) {
    var oldVal = i;
    var newVal = rows.length - i;
    var point = null;
    if ((intercept === null) && (oldVal === newVal)) {
      intercept = i;
      point = 'point { size: 10; }';
    }
    data.addRow([i + 1, oldVal, newVal, point])
  });

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

  google.visualization.events.addListener(chart, 'ready', function () {
    chart.setSelection([{row: intercept, column: 2}]);
  });

  chart.draw(data, {
    pointSize: 0.1,
    tooltip: {
      trigger: 'both'
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...