使Chartjs中的所有标签都处于固定位置

Question

一直在寻找这个问题但无济于事。我想要一种方法来修改特定标签的位置。 例如，我希望图表上的第二个标签是“左对齐”＆＃39;以便显示的工具提示不以该线为中心。我认为这是不可能的，或者至少不值得工作，所以我真正喜欢做的是渲染某种div，而不是在div中显示所有标签/工具提示。

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

要点： 我希望我的图表中的所有悬停工具提示都显示在相同的位置，无论它们存在于图表中的哪个位置。

编辑： 从下图中可以看出，结束节点标签正在从图表的其余部分中切断。从技术上讲，最左边的标签会自动对齐，因此它会将其标签推到图表的可见区域。但是，因为我有一个幻象节点（允许一条引导线），所以“第一个＆＃39;看到的节点实际上是第二个，它阻止它进行正确的对齐。

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

Answer 1

花点时间，想出一个解决方案。

图表为我们提供了.getPointsAtEvent()方法，因此使用它，我能够在悬停位置抓取数据节点，获取它的标签，然后在单独的位置显示该标签。 / p>

$('.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');
    })
})

抓住每个图表，遍历它们并找到画布和我用来存储工具提示（.label-container）的额外div。将mousemove和mouseleave侦听器添加到图表中。当鼠标移动时，找到它结束的数据节点，抓住第一个（最左边的一个，即使多个被选中）从该节点获取标签，然后替换label＆＃ 39;带有该标签的html。在显示标签时，我使用CSS对其进行格式化，因此我还将一个类label-tooltip添加到标注它的标签中，否则它只是隐藏。

结果：