How to show label when mouse over bar

后端 未结 1 1582
青春惊慌失措
青春惊慌失措 2021-02-08 06:28

I made a Bar chart by chartist.js.

Now I want to add some listening event on the bars.

How can I do to let label show up when mouse over the bar?

相关标签:
1条回答
  • 2021-02-08 07:21

    You have 2 options -


    Option 1


    There is a tooltip plugin that you could use. You can find it here - https://github.com/Globegitter/chartist-plugin-tooltip

    Once you add the CSS and JS files, you should be able to call the plugin like this - Chartist.plugins.tooltip()

    Here is an example from their Plugins page -

    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()
      ]
    });
    

    This will be the easier and the better option.


    Option 2


    If you want to do something by yourself, you can bind mouseover and mouseout events on draw event's callback -

    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>

    UPDATE: Updated the code as per ty's comment

    0 讨论(0)
提交回复
热议问题