Chart.js 如何创建带有可点击按钮的动态工具提示答案

【问题标题】：Chart.js How to create dynamic tooltip with clickable buttons inside itChart.js 如何创建带有可点击按钮的动态工具提示
【发布时间】：2020-06-25 15:28:33
【问题描述】：

我想在我的图表中有一个动态工具提示，里面有按钮。看起来我想要的是创建一个自定义工具提示。创建后，我尝试将鼠标悬停在 i 上，但我不能。起初我认为这是不可能的，所以我决定创建我自己的自定义工具提示，但结果并不好。我创建了自己的 html 组件和一个显示该组件的函数，当我将鼠标悬停在图表中的一个点上时，该函数被触发。结果很糟糕，工具提示一直在闪烁，所以我回到了 chart.js 提供的自定义工具提示选项。但是，当将鼠标悬停在自定义工具提示上时，我还没有找到保持打开状态的方法。

我正在使用的代码：

 tooltips: {
                enabled : false,
                custom : function(tooltipModel){
                    var tooltipEl = document.getElementById('custom-tooltip')
                   //if tooltip component doesn't exist yet
                    if(!tooltipEl){
                        tooltipEl =  document.createElement('div')
                        tooltipEl.id = 'custom-tooltip'
                        
                        tooltipEl.innerHTML = '<table></table>'

                        document.body.appendChild(tooltipEl)
                    }

                    //making component opacity the same as in model
                    if(tooltipModel.opacity === 0){
                        tooltipEl.style.opacity = 0;
                        return;
                    }

                    tooltipEl.classList.remove('above','below','no-transform',)

                    if(tooltipModel.yAlign){
                        tooltipEl.classList.add(tooltipModel.yAlign)
                    }else{
                        tooltipEl.classList.add('no-tranform')
                    }


                    function getBody(bodyItem){
                        return bodyItem.lines
                    }
                    //adding information inside component
                    if(tooltipModel.body){
                        var titleLines = tooltipModel.title || []
                        var bodyLines = tooltipModel.body.map(getBody)

                        var innerHTML = '<thead>'

                        titleLines.forEach(function(title){
                            innerHTML +=  '<tr><th>' +  title + '</th></tr>'
                        })

                        innerHTML += '</thead><tdboy>'

                        bodyLines.forEach(function(body,i){
                            var colors = tooltipModel.labelColors[i]
                            var style = `
                                background : ${colors.backgroundColor};
                                border-color : ${colors.borderColor};
                                border-width : 2px;
                            `

                            var span = '<span style="'+style+'"></span>'
                            innerHTML += '<tr><td>' + span + body + '</td></tr>'

                        })

                        innerHTML += '</tbody>'

                        innerHTML += '<button>button inside tooltip</button>'

                        var tableRoot = tooltipEl.querySelector('table')
                        tableRoot.innerHTML = innerHTML

                    }

                    var position = this._chart.canvas.getBoundingClientRect()

                    tooltipEl.classList.add('custom-tooltip')

                    tooltipEl.style.opacity = 1
                    tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px'
                    tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px'
                    // tooltipEl.style.pointerEvents = 'none'



                }

我有一个有效的自定义工具提示： https://jsfiddle.net/wL179b2p/

我只需要一些可以防止工具提示在不悬停时关闭的东西。

【问题讨论】：

标签： javascript charts tooltip

【解决方案1】：

不要使用like html字符串使用document.createElement.所以可以动态的给元素添加事件

var d1 = document.createElement('div');
 var node = document.createTextNode("paragraph 2");
d1.appendChild(node);
var d3 = document.createElement('div');
var button = document.createElement('button');
button.setAttribute('onclick', 'GetTableValues()');
//here GetTableValues is the javascript funtion called
d3.appendChild(button);
d1.appendChild(d3);

【讨论】：

【解决方案2】：

我找到的解决方案是创建事件监听器：

        customTooltip.addEventListener('mouseout',()=>{
          customTooltip.style.opacity = 0
        })

        customTooltip.addEventListener('mouseover',()=>{

          customTooltip.style.opacity = tooltipOpacity
        })

当我将鼠标悬停在工具提示上时，这有助于我保持打开状态

【讨论】：

【解决方案3】：

我在选项中使用events: ['click'] 配置：

window.onload = function(){
    var ctx = document.getElementById('chart').getContext('2d')
    var chart = new Chart(ctx,{
        type : 'line',
        data : {
            labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets : [
                {
                    label : 'My first dataset',
                    data : [0, 10, 5, 2, 20, 30, 45]
                }
                
            ]
            
        },

        options : {
                events: ['click'],
            tooltips: {
                enabled : false,

有关详细信息，请在此处进一步阅读... https://www.chartjs.org/docs/latest/configuration/interactions.html#event-option

【讨论】：