这个问题找了好久没找到。我想要一种修改特定标签位置的方法。 例如,我希望图表上的第二个标签“左对齐”,这样显示的工具提示就不会在线居中。我认为这是不可能的,或者至少不值得这样做,所以我真正想做的是呈现某种 div,而不是在该 div 内显示所有标签/工具提示。
问题:我使用前导/尾随节点,所以我使用变通方法来改变节点的可见位置。不幸的是,这也会导致侧面标签被切断。我希望能够调整自己的位置。我认为更简单的方法是以某种方式在工具提示上指定类名,然后使用其他方式定位该工具提示。
总结: 我希望图表中的所有悬停工具提示都显示在同一位置,无论它们位于图表中的哪个位置。
编辑: 正如您从下图中看到的,结束节点标签与图表的其余部分被切断。从技术上讲,最左边的标签会自动对齐,因此它将标签推到图表的可见区域。但是,因为我有一个幻影节点(允许引导线),所以看到的“第一个”节点实际上是第二个,这阻止了它进行正确的对齐。
理想情况下,我希望标签显示在不同的指定位置。
最佳答案
花一些时间想出了一个解决方案。
Charts 为我们提供了一个 .getPointsAtEvent()
方法,因此使用它,我能够在悬停位置抓取数据节点,获取它的标签,然后在单独的位置显示该标签.
$('.chart').each(function() {
var chart = $(this).first().children('canvas')[0],
label = $(chart).parents('.chart-container').find('.label-container').find('span');
$(chart)
.mousemove(function(evt) {
var data_nodes = window.Chart[chart.id].getPointsAtEvent(evt);
if (data_nodes.length > 0) {
label.html(data_nodes[0].label);
label.addClass('label-tooltip');
} else {
label.html('');
label.removeClass('label-tooltip');
}
})
.mouseleave(function() {
label.html('');
label.removeClass('label-tooltip');
})
})
抓取每个图表,遍历它们并找到 Canvas 和我用来存储工具提示的额外 div (.label-container
)。将 mousemove
和 mouseleave
监听器添加到图表。当鼠标移动时,找到它结束的数据节点,捕获第一个(最左边的,即使选择了多个)从该节点获取标签,然后替换标签
的html带有那个标签。当显示标签时,我使用 CSS 对其进行格式化,因此我还向标签添加了一个类 label-tooltip
来设置它的样式,否则它只是隐藏。
关于javascript - 让 Chartjs 中的所有标签都在固定位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32830182/