时间戳

首页 > 解决方案 > Chart.js 不需要的工具提示出现在图例中

javascript - Chart.js 不需要的工具提示出现在图例中

问题描述

我有一个tooltip功能可以帮助我以不同于股票的方式显示图表中的信息。到目前为止，它对我来说效果很好，但是它会导致为图例显示一个工具提示。我想在保持不同键的点击功能的同时不显示它。

这是我在下面tooltips找到的options

        tooltips: {
            mode: 'index',
            intersect: false,
            callbacks: {
                label: function(tooltipItem, data) {
                    if((tooltipItem.yLabel) >= 1000000){
                        return data.datasets[tooltipItem.datasetIndex].label + ": $" + money_round((tooltipItem.yLabel)/1000000)+" M";
                    }else if((tooltipItem.yLabel) >= 1000){
                        return data.datasets[tooltipItem.datasetIndex].label + ": $" + money_round((tooltipItem.yLabel)/1000)+" K";
                    }else{
                        return data.datasets[tooltipItem.datasetIndex].label + ": $" + (tooltipItem.yLabel);
                    }
                }
            }
        },

在此处输入图像描述

此外，我正在寻找一种方法来tooltips显示悬停项目的左侧和/或减少从光标到显示项目的距离，tooltip以防止tooltip在不需要时弹出。

标签： javascriptchart.js

解决方案

对于工具提示位置，您可以使用xAlign: 'right'，但您必须确保图表左侧有足够的空间，因为工具提示将始终显示在点的左侧。

“减少从光标到显示工具提示的项目的距离”在您使用时是不可能的，intersect: false因为它总是会显示带有此选项的工具提示。

我会使用intersect: true（或简单地省略它，因为这是默认设置）结合增加的命中半径来处理诸如工具提示之类的事件。

elements: {
  point: {
    hitRadius: 20
  }
},

这是一个 JSBin来演示这些选项。

推荐阅读