如何在鼠標懸停時顯示標籤

Question

我用chartist.js製作了一個條形圖。

現在我想添加一些監聽事件的酒吧。

如何讓標籤在鼠標懸停時顯示？

Answer 1

您有2個選項 -

選項1

---

有，你可以使用的工具提示插件。你可以在這裏找到它 - https://github.com/Globegitter/chartist-plugin-tooltip

一旦添加CSS和JS文件，你應該能夠調用插件這樣的 - Chartist.plugins.tooltip()

這裏是他們的Plugins頁的例子 -

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

---

如果你想自己做一些事情，你可以綁定上draw事件的回調mouseover和mouseout事件 -

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); 
 

 
var addedEvents = false; 
 
chart.on('draw', function() { 
 
    if (!addedEvents) { 
 
    $('.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>