Come mostrare l'etichetta con il mouse sulla barra

Question

Ho creato un grafico a barre da chartist.js.

Ora voglio aggiungere un evento di ascolto sulle barre.

Come posso fare per far apparire l'etichetta quando il mouse supera la barra?

Answer 1

Hai 2 opzioni -

Opzione 1

---

C'è un plugin tooltip che si potrebbe usare. Potete trovare qui - https://github.com/Globegitter/chartist-plugin-tooltip

Una volta aggiunto il file JS CSS e, si dovrebbe essere in grado di chiamare il plugin come questo - Chartist.plugins.tooltip()

Ecco un esempio dalla loro pagina 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() 
    ] 
}); 

Questa sarà l'opzione più facile e migliore.

Opzione 2

---

Se si vuole fare qualcosa da soli, è possibile associare mouseover e mouseout eventi in callback draw dell'evento -

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>