有没有一种方法可以在画布上的任何地方点击时得到最近的点?也许可以收获核心的“nearest”方法?谢谢
ds97pgxw1#
我想你会发现getElementsAtXAxis非常有帮助。基本上,getElementsAtXAxis与getElementsAtEvent具有非常相似的行为,尽管当单击事件不与图表的点相交时,它将返回最近的ChartElement。唯一的缺点是,它将返回all最近x轴索引上的ChartElement。因此,如果您使用多个数据集,这可能不是您的最佳选择。代码示例:
getElementsAtXAxis
getElementsAtEvent
canvas.onclick = function(e) { const elts = chart.getElementsAtXAxis(simulatedEvent); if (elts && elts.length) { // Do something with elts[0] } };
如果有人在寻找相关的代码片段,它位于core.controller.js中:
core.controller.js
getElementAtEvent: function(e) { return Interaction.modes.nearest(this, e, {intersect: true}); }, getElementsAtEvent: function(e) { return Interaction.modes.index(this, e, {intersect: true}); }, getElementsAtXAxis: function(e) { return Interaction.modes.index(this, e, {intersect: false}); },
vm0i2vca2#
我相信您正在寻找.getElementAtEvent和.getElementsAtEvent(https://www.chartjs.org/docs/latest/developers/api.html#getelementsatevente)您可以做的是设置一个clickHandler函数,该函数将从onClick获取事件,并使用它返回该事件下的图表元素。以下是官方文档中的一个示例:
.getElementAtEvent
.getElementsAtEvent
clickHandler
onClick
function clickHandler(evt) { var firstPoint = myChart.getElementAtEvent(evt)[0]; if (firstPoint) { var label = myChart.data.labels[firstPoint._index]; var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index]; } }
之后,只需将其添加到图表画布(同样,从官方文档):
canvas.onclick = clickHandler;
kkih6yb83#
我在一个包含两个数据集的图表中实现了这一点,如下所示:
const userPricingEl = document.getElementById("userPricingChart"); const userPricingChart = new Chart(); userPricingEl.onclick = function (evt) { let nearestPoints = userPricingChart.getElementsAtEventForMode(evt, "nearest", { intersect: false }); if (nearestPoints) { let nearestPoint = nearestPoints[0]; let label = userPricingChart.data.datasets[nearestPoint._datasetIndex].label; let value = userPricingChart.data.datasets[nearestPoint._datasetIndex].data[nearestPoint._index]; console.log(label, value); } }
其中"userPricingChart"是一个完全充实的new Chart()对象,为了简洁起见,我省略了它。这里的关键特性是getElementsAtEventForMode()函数,文档为here(尽管是arguably badly)。希望这个有用。
new Chart()
getElementsAtEventForMode()
3条答案
按热度按时间ds97pgxw1#
我想你会发现
getElementsAtXAxis
非常有帮助。基本上,
getElementsAtXAxis
与getElementsAtEvent
具有非常相似的行为,尽管当单击事件不与图表的点相交时,它将返回最近的ChartElement。唯一的缺点是,它将返回all最近x轴索引上的ChartElement。
因此,如果您使用多个数据集,这可能不是您的最佳选择。
代码示例:
如果有人在寻找相关的代码片段,它位于
core.controller.js
中:vm0i2vca2#
我相信您正在寻找
.getElementAtEvent
和.getElementsAtEvent
(https://www.chartjs.org/docs/latest/developers/api.html#getelementsatevente)您可以做的是设置一个
clickHandler
函数,该函数将从onClick
获取事件,并使用它返回该事件下的图表元素。以下是官方文档中的一个示例:
之后,只需将其添加到图表画布(同样,从官方文档):
kkih6yb83#
我在一个包含两个数据集的图表中实现了这一点,如下所示:
其中"userPricingChart"是一个完全充实的
new Chart()
对象,为了简洁起见,我省略了它。这里的关键特性是
getElementsAtEventForMode()
函数,文档为here(尽管是arguably badly)。希望这个有用。