mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
a8a83d12cd
Provide APIs to set active (hovered) and tooltip elements. Chart.setActiveElements will set the hovered items. Chart.tooltip.setActiveElements will set the tooltip items.
121 lines
2.7 KiB
HTML
121 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Programmatic Event Triggers</title>
|
|
<script src="../../dist/chart.js"></script>
|
|
<script src="../utils.js"></script>
|
|
<style>
|
|
canvas {
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="container" style="width: 75%;">
|
|
<canvas id="canvas"></canvas>
|
|
</div>
|
|
<button id="hover">Trigger Hover</button>
|
|
<button id="tooltip">Trigger Tooltip</button>
|
|
<script>
|
|
var color = Chart.helpers.color;
|
|
var barChartData = {
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
datasets: [{
|
|
label: 'Dataset 1',
|
|
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
|
|
borderColor: window.chartColors.red,
|
|
borderWidth: 1,
|
|
hoverBorderWidth: 5,
|
|
hoverBorderColor: 'green',
|
|
data: [
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor()
|
|
]
|
|
}, {
|
|
label: 'Dataset 2',
|
|
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
|
|
borderColor: window.chartColors.blue,
|
|
borderWidth: 1,
|
|
hoverBorderWidth: 5,
|
|
hoverBorderColor: 'green',
|
|
data: [
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor()
|
|
]
|
|
}]
|
|
|
|
};
|
|
|
|
window.onload = function() {
|
|
var ctx = document.getElementById('canvas').getContext('2d');
|
|
window.myBar = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: barChartData,
|
|
options: {
|
|
responsive: true,
|
|
}
|
|
});
|
|
|
|
};
|
|
|
|
document.getElementById('hover').addEventListener('click', function() {
|
|
if (window.myBar.getActiveElements().length > 0) {
|
|
window.myBar.setActiveElements([]);
|
|
} else {
|
|
window.myBar.setActiveElements(
|
|
[
|
|
{
|
|
datasetIndex: 0,
|
|
index: 0,
|
|
}, {
|
|
datasetIndex: 1,
|
|
index: 0,
|
|
}
|
|
]);
|
|
}
|
|
window.myBar.update();
|
|
});
|
|
|
|
document.getElementById('tooltip').addEventListener('click', function() {
|
|
const tooltip = window.myBar.tooltip;
|
|
if (tooltip.getActiveElements().length > 0) {
|
|
tooltip.setActiveElements([], {x: 0, y: 0});
|
|
} else {
|
|
const chartArea = window.myBar.chartArea;
|
|
tooltip.setActiveElements(
|
|
[
|
|
{
|
|
datasetIndex: 0,
|
|
index: 2,
|
|
}, {
|
|
datasetIndex: 1,
|
|
index: 2,
|
|
}
|
|
],
|
|
{
|
|
x: (chartArea.left + chartArea.right) / 2,
|
|
y: (chartArea.top + chartArea.bottom) / 2,
|
|
}
|
|
);
|
|
}
|
|
|
|
window.myBar.update();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|