Триггер всплывающей подсказки Google Charts на ярлыке значения при наведении - PullRequest
Новая
       10

Триггер всплывающей подсказки Google Charts на ярлыке значения при наведении

0 голосов
/ 29 ноября 2018

У меня проблема с Google Charts.У меня есть гистограмма с некоторыми большими и маленькими значениями.У баров также есть метка значения.Если я наведу курсор на панель, появится всплывающая подсказка.Но при наведении указателя на значение (внутри или снаружи панели) подсказка не отображается.Поэтому у меня нет возможности показывать всплывающую подсказку на очень маленьких барах.

Упрощенный пример: https://jsfiddle.net/2d0kbLnm/40/

Знаете ли вы, как сказать Google Charts, чтобы показывать всплывающую подсказку при наведении курсора на значения?.

A focusTarget: 'category' обеспечивает дополнительную информацию в подсказке, которая мне не нужна.Значение оси X (с синей точкой) и заголовок оси Y вставляются во всплывающую подсказку.Могу ли я предотвратить это?Я хочу только показать мое значение HTML.Кроме того, всплывающая подсказка также скрывает указатель значения.

Спасибо за любую помощь и идеи.

heiwil

1 Ответ

0 голосов
/ 29 ноября 2018

есть еще одна роль столбца, которая будет отображать дополнительный текст при наведении на аннотацию,
это -> role: 'annotationText'

, это не обязательно всплывающая подсказка, и не будет отображаться html,
, но появляется при наведении аннотации.

это единственный «стандартный» вариант.

см. Следующий рабочий фрагмент,
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *, поэтому вы можете поменять его, чтобы увидеть результат.

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Element', 'Saldo', {role: 'style', type: 'string'}, {role: 'annotation', type: 'string'}],
    ['Element 1', 60000.15, '#3949AB', '60,000.15 CHF'],
    ['Element 2', 14.87, '#3D5AFE', '14.87 EUR'],
    ['Element 3', -13451.31, '#cc0000', '-13,451.31 EUR'],
    ['Element 4', 0, '#42A5F5', '0 CHF']
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 2, 3, {
    calc: function (dt, row) {
      return dt.getValue(row, 0) + ' - ' + dt.getColumnLabel(1) + ': ' + dt.getFormattedValue(row, 1);
    },
    role: 'annotationText',
    type: 'string'
  }]);

  var options = {
    legend: {
      position: 'none'
    },
    hAxis: {
      logscale: true
    },
    vAxis: {
      gridlines: {
        color: 'transparent'
      },
      textPosition: 'none'
    }
  };

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

  chart.draw(view, options);  // <-- use view to draw chart
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...