Как показать метку при наведении мыши на панель

Я сделал гистограмму с помощью chartist.js.

Теперь я хочу добавить событие прослушивания на барах.

Как я могу сделать, чтобы метка отображалась при наведении курсора на панель?


javascript chartist.js
person 鄭元傑    schedule 02.01.2016    source источник

Ответы (1)


arrow_upward
30
arrow_downward

У вас есть 2 варианта -


Опция 1

Существует плагин всплывающей подсказки, который вы можете использовать. Вы можете найти его здесь - https://github.com/Globegitter/chartist-plugin-tooltip

Как только вы добавите файлы CSS и JS, вы сможете вызывать плагин следующим образом: Chartist.plugins.tooltip()

Вот пример с их страницы Плагины:

var chart = new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3],
  series: [
    [
      {meta: 'description', value: 1 },
      {meta: 'description', value: 5},
      {meta: 'description', value: 3}
    ],
    [
      {meta: 'other description', value: 2},
      {meta: 'other description', value: 4},
      {meta: 'other description', value: 2}
    ]
  ]
}, {
  low: 0,
  high: 8,
  fullWidth: true,
  plugins: [
    Chartist.plugins.tooltip()
  ]
});

Это будет более легкий и лучший вариант.


Вариант 2

Если вы хотите сделать что-то самостоятельно, вы можете привязать события mouseover и mouseout к обратному вызову события draw -

var data = {
  labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
  series: [
    [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
  ]
};

var options = {
  high: 10,
  low: -10,
  axisX: {
    labelInterpolationFnc: function(value, index) {
      return index % 2 === 0 ? value : null;
    }
  }
};

var chart = new Chartist.Bar('.ct-chart', data, options);

// Based on ty's comment
chart.on('created', function(bar) {
  $('.ct-bar').on('mouseover', function() {
    $('#tooltip').html('<b>Selected Value: </b>' + $(this).attr('ct:value'));
  });

  $('.ct-bar').on('mouseout', function() {
    $('#tooltip').html('<b>Selected Value:</b>');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/chartist.js/0.9.5/chartist.min.js"></script>
<link href="https://cdn.jsdelivr.net/chartist.js/0.9.5/chartist.min.css" rel="stylesheet" />
<div id="tooltip"><b>Selected Value:</b>
</div>
<div class="ct-chart"></div>

ОБНОВЛЕНИЕ: код обновлен в соответствии с комментарием ty.

person Aswin Ramakrishnan    schedule 02.01.2016
comment
Потрясающий ! Это то, что я хочу. - person 鄭元傑; 03.01.2016
comment
Я использую метеор и пытаюсь использовать ваш код на линейной диаграмме... но console.log($(this).attr('ct:value')); есть неопределенные какие-либо идеи? - person Ethan Waldie; 17.06.2016
comment
Хорошее решение Эшвин. Можно ли обозначить, какого красного цвета горизонтальная полоса? - person Puneeth Reddy V; 07.11.2016
comment
В варианте № 2 вы определяете addedEvents, но никогда не меняете его значение. Это означает, что если вы наносите на карту 50 элементов, вы привязываете до 50 событий к каждой точке! Более чистым и эффективным подходом было бы использование chart.on('created', function() { ...}, которое вызывается ровно один раз, и удаление addedEvents. - person ty.; 04.07.2017
comment
@EthanWaldie использовать element.GetAttribute(ct:value); Прекратите использовать jquery везде. - person Bojidar Stanchev; 13.11.2019
comment
Любая идея, как добиться option1 с retyped.chartist ? - person Bojidar Stanchev; 13.11.2019