如何在鼠标悬停在栏上时显示标签

我用chartist.js做了一个条形图.

现在我想在栏上添加一些听力事件.

当鼠标悬停在栏上时,如何让标签显示？

你有2个选择 -

您可以使用工具提示插件.你可以在这里找到它 - 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()
  ]
});

这将是更容易和更好的选择.

如果你想自己做一些事情,你可以在事件的回调中绑定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('Selected Value: ' + $(this).attr('ct:value'));
  });

  $('.ct-bar').on('mouseout', function() {
    $('#tooltip').html('Selected Value:');
  });
});

Selected Value: