javascript - 让 Chartjs 中的所有标签都在固定位置

Question

这个问题找了好久没找到。我想要一种修改特定标签位置的方法。例如，我希望图表上的第二个标签“左对齐”，这样显示的工具提示就不会在线居中。我认为这是不可能的，或者至少不值得这样做，所以我真正想做的是呈现某种 div，而不是在该 div 内显示所有标签/工具提示。

问题:我使用前导/尾随节点，所以我使用变通方法来改变节点的可见位置。不幸的是，这也会导致侧面标签被切断。我希望能够调整自己的位置。我认为更简单的方法是以某种方式在工具提示上指定类名，然后使用其他方式定位该工具提示。

总结:我希望图表中的所有悬停工具提示都显示在同一位置，无论它们位于图表中的哪个位置。

编辑:正如您从下图中看到的，结束节点标签与图表的其余部分被切断。从技术上讲，最左边的标签会自动对齐，因此它将标签推到图表的可见区域。但是，因为我有一个幻影节点(允许引导线)，所以看到的“第一个”节点实际上是第二个，这阻止了它进行正确的对齐。

理想情况下，我希望标签显示在不同的指定位置。

Answer 1

花一些时间想出了一个解决方案。

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 来设置它的样式，否则它只是隐藏。

结果: