Çubuğun üzerine fare eklendiğinde nasıl etiket gösterileceği

Question

chartist.js'ye göre bir çubuk grafik hazırladım.

Artık çubuklarda biraz dinleme olayı eklemek istiyorum.

Çubuğun üzerinde fare olduğunda etiketin gösterilmesini sağlamak için nasıl yapabilirim?

Seçenek 1

---

Kullanmak olabilecek bir araç ipucu eklentisi var -

Answer 1

2 seçeneğiniz var. Burada bulabilirsiniz - CSS ve JS dosyaları ekledikten sonra https://github.com/Globegitter/chartist-plugin-tooltip

, böyle eklentiyi çağırmak mümkün olmalıdır -

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

- İşte Chartist.plugins.tooltip()

onların Plugins sayfasından bir örnektir

Bu daha kolay ve daha iyi seçenek olacak.

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>

- Tek başına bir şey yapmak istiyorsan

Seçenek 2

---

, sen draw Etkinliğin Geri aramada mouseover ve mouseout olayları bağlayabilir