Chart.js 如何創建帶有可點擊按鈕的動態工具提示

Question

我想在我的圖表中有一個動態工具提示，里面有按鈕。 看起來我想要的是創建一個自定義工具提示。 一旦創建，我嘗試通過我 hover 但我不能。 起初我認為這是不可能的，所以我決定創建我自己的自定義工具提示，但結果並不好。 我創建了自己的 html 組件和 function 來顯示這個組件，當我將鼠標懸停在圖表中的一個點上時，function 被觸發。 結果很糟糕，工具提示一直在閃爍，所以我回到了 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/

我只需要一些可以防止工具提示在不懸停時關閉的東西。

Answer 1

不要使用像 html 字符串使用 document.createElement.So 可以動態添加事件到元素

 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);

Answer 2

我找到的解決方案是創建事件監聽器：

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

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

          customTooltip.style.opacity = tooltipOpacity
        })

當我將鼠標懸停在它上面時，這有助於我保持工具提示打開

Answer 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