Javascript Chartjs工具提示定位点在条形图上的位置

我有一个使用Chartjs的条形图，具有固定的y轴最大值。有时数据可能超过最大值，但悬停工具提示始终固定在条形图的顶部，因此无法看到。“工具提示”的“位置”选项实际上对我不起作用

那么，有没有办法在工具栏底部显示工具提示？或者它可以像鼠标一样跟随鼠标光标

var ctx=document.getElementByIdchart.getContext2d； var条形图=新的Chartctx{ 类型：'bar'， 选项：{ 比例：{ 雅克斯：[{ 显示：对， 滴答声：{ 分:0,， 最高：120 }, }], }, 工具提示：{ //位置：'最近'， 位置：'平均'， }, 图例：{ 显示：假 } }, 数据：{ 标签：[A、B、C、D]， 数据集：[{ 标签：数据集1， 背景颜色：[ ‘44b2d7’， ‘44b2d7’， ‘44b2d7’， ‘44b2d7’， ], 边框颜色：[ ‘44b2d7’， ‘44b2d7’， ‘44b2d7’， ‘44b2d7’ ], 边框宽度：0， 数据：[131,65,165,85] }] } };

---

可以通过向Chart.Tooltip.positioners映射添加函数来定义新模式。 您可以像在chartjs中那样创建自定义发布：

    Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
    /** @type {Chart.Tooltip} */
    var tooltip = this;

    /* ... */

    return {
        x: eventPosition.x,
        y: eventPosition.y
    };
}

渲染图表时，需要将自定义函数设置为选项：

tooltips: { 
            position : 'custom',   //<-- important same name as your function above      
            callbacks: {
              label: function(tooltipItem, data) {
               var label = Math.floor(tooltipItem.yLabel*100)/100+" "+data.datasets[tooltipItem.datasetIndex].label;
               return label;
              }
            }
          }

---

查看我的完整示例。

可以通过向Chart.Tooltip.positioners映射添加函数来定义新模式。 您可以像在chartjs中那样创建自定义发布：

    Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
    /** @type {Chart.Tooltip} */
    var tooltip = this;

    /* ... */

    return {
        x: eventPosition.x,
        y: eventPosition.y
    };
}

渲染图表时，需要将自定义函数设置为选项：

tooltips: { 
            position : 'custom',   //<-- important same name as your function above      
            callbacks: {
              label: function(tooltipItem, data) {
               var label = Math.floor(tooltipItem.yLabel*100)/100+" "+data.datasets[tooltipItem.datasetIndex].label;
               return label;
              }
            }
          }

---

看看我的完整示例。

似乎SO的代码片段有一个bug，如。请转到整个页面。似乎有一个错误与SO的代码片段一样。请翻到整页，效果很好！一个简单的后续问题是，工具提示在您的小提琴中跟踪鼠标光标的移动，但在我自己的开发环境中不跟踪。相同的图表选项，相同的浏览器。可能的原因是什么？在您的DevTools中显示了一些错误？你清除浏览器缓存了吗？您能提供更多关于您的开发环境的详细信息吗？@EdiCarlos，请您使用ng2图表在angular中分享相同的演示吗？效果非常好！一个简单的后续问题是，工具提示在您的小提琴中跟踪鼠标光标的移动，但在我自己的开发环境中不跟踪。相同的图表选项，相同的浏览器。可能的原因是什么？在您的DevTools中显示了一些错误？你清除浏览器缓存了吗？您能提供更多关于您的开发环境的详细信息吗？@EdiCarlos，请使用ng2图表在angular中分享相同的演示？