Zrobiłem wykres słupkowy pod adresem chartist.js.Jak wyświetlić etykietę, gdy wskaźnik myszy nad paskiem
Teraz chcę dodać trochę zdarzeń odsłuchowych na taktach.
Jak zrobić, aby etykieta była wyświetlana po najechaniu myszką na pasek?
Zrobiłem wykres słupkowy pod adresem chartist.js.Jak wyświetlić etykietę, gdy wskaźnik myszy nad paskiem
Teraz chcę dodać trochę zdarzeń odsłuchowych na taktach.
Jak zrobić, aby etykieta była wyświetlana po najechaniu myszką na pasek?
Masz 2 opcje -
Jest plugin podpowiedź, że można użyć. Można go znaleźć tutaj - https://github.com/Globegitter/chartist-plugin-tooltip
Po dodaniu plików CSS i JS, powinieneś być w stanie połączyć się z wtyczki tak - Chartist.plugins.tooltip()
Oto przykład z ich Plugins stronę -
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()
]
});
To będzie łatwiejsze i lepsze rozwiązanie.
Jeśli chcesz zrobić coś samemu, można wiązać mouseover
i mouseout
wydarzenia na zwrotnego draw
imprezy -
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>
Good One Ashwin! –
Awesome! To jest to czego chce. –
Używam meteora i próbuję użyć twojego kodu na wykresie liniowym ... ale console.log ($ (this) .attr ('ct: value')); nie zdefiniowałeś żadnych pomysłów? –