javascript - Chartjs - 当用户点击图表中的数据点时保持工具提示打开
问题描述
我一直在用下面的JSFiddle查看这个线程,这正是我需要的。似乎答案已经过时,但我无法让它工作。
我正在尝试创建的插件将允许用户单击图表上的数据点,并且工具提示将保持打开状态。然后单击另一个数据点,该工具提示也将保持打开状态。这将允许用户更轻松地比较两个不同工具提示中的数据。如果允许同时出现多个工具提示,“click”事件将很有用。任何想法或指向正确方向的指针都会非常感激!
以下是来自另一个线程的插件(Marine Giraud 的信任)
var keepTooltipOpenPlugin = {
beforeRender: function(chart) {
// We are looking for bubble which owns "keepTooltipOpen" parameter.
var datasets = chart.data.datasets;
chart.pluginTooltips = [];
for (i = 0; i < datasets.length; i++) {
for (j = 0; j < datasets[i].data.length; j++) {
if (datasets[i].data[j].keepTooltipOpen && !chart.getDatasetMeta(i).hidden) {
//When we find one, we are pushing all informations to create the tooltip.
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [chart.getDatasetMeta(i).data[j]]
}, chart));
}
}
}
}, // end beforeRender
afterDatasetsDraw: function(chart, easing) {
// Draw tooltips
Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
tooltip.initialize();
tooltip.update();
tooltip.pivot();
tooltip.transition(easing).draw();
});
} // end afterDatasetsDraw
}
解决方案
推荐阅读
- java - 当我尝试显示图像时,我的 Image 类返回 null。我怎样才能解决这个问题?
- javascript - Next.js 受控输入不是“受控”
- java - 基于java中数据集时间块的日期保存时间范围
- python - Sum 聚合值 django ORM
- java - 检查设备上是否安装了 App 时出现空指针异常
- javascript - Node.js如何在循环中发出http get请求
- c++ - 如果栈是用链表实现的,栈的size函数的时间复杂度是多少?
- java - javax.net.ssl.SSLSession 创建时间是多少?
- swift - 如何在 SwiftUI 视图中自动反映 CoreData+iCloud 的变化?
- windows - 使用 robocopy 复制带空格的文件/文件夹太疯狂了