Vuejs2 自定义Chart.js的工具提示

我正在使用最新版本的

vue

和

vue chart.js

我想自定义鼠标悬停点时显示的工具提示

问题 工具提示不会从默认提示更改

问题: 如何自定义工具提示。最终，我希望能够单击工具提示中的链接来触发一个对话框，该对话框将显示从vue组件中包含的数据中获取的详细信息

Vue.component('line-chart', {
  extends: VueChartJs.Line,
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 39, 10, 40, 39, 80, 40]

        }
      ]
    }, {
      tooltips: {
        custom: function(tooltipModel) {
                // Tooltip Element
                var tooltipEl = document.getElementById('chartjs-tooltip');

                // Create element on first render
                if (!tooltipEl) {
                    tooltipEl = document.createElement('div');
                    tooltipEl.id = 'chartjs-tooltip';
                    tooltipEl.innerHTML = "<table></table>"
                    document.body.appendChild(tooltipEl);
                }

                // Hide if no tooltip
                if (tooltipModel.opacity === 0) {
                    tooltipEl.style.opacity = 0;
                    return;
                }

                // Set caret Position
                tooltipEl.classList.remove('above', 'below', 'no-transform');
                if (tooltipModel.yAlign) {
                    tooltipEl.classList.add(tooltipModel.yAlign);
                } else {
                    tooltipEl.classList.add('no-transform');
                }

                function getBody(bodyItem) {
                    return bodyItem.lines;
                }

                // Set Text
                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><tbody>';

                    bodyLines.forEach(function(body, i) {
                        var colors = tooltipModel.labelColors[i];
                        var style = 'background:' + colors.backgroundColor;
                        style += '; border-color:' + colors.borderColor;
                        style += '; border-width: 2px';
                        var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
                        innerHtml += '<tr><td>' + span + body + '</td></tr>';
                    });
                    innerHtml += '</tbody>';

                    var tableRoot = tooltipEl.querySelector('table');
                    tableRoot.innerHTML = innerHtml;
                }

                // `this` will be the overall tooltip
                var position = this._chart.canvas.getBoundingClientRect();

                // Display, position, and set styles for font
                tooltipEl.style.opacity = 1;
                tooltipEl.style.left = position.left + tooltipModel.caretX + 'px';
                tooltipEl.style.top = position.top + tooltipModel.caretY + 'px';
                tooltipEl.style.fontFamily = tooltipModel._fontFamily;
                tooltipEl.style.fontSize = tooltipModel.fontSize;
                tooltipEl.style.fontStyle = tooltipModel._fontStyle;
                tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
            }
      },
      responsive: true,
      maintainAspectRatio: false
    })
  }

})

var vm = new Vue({
  el: '.app',
  data: {
    message: 'Hello World'
  }
})

Vue.component（'折线图'{
扩展：VueChartJs.Line，
挂载（）{
这是我的艺术({
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“数据一”，
背景颜色：“#f87979”，
数据：[40,39,10,40,39,80,40]
}
]
}, {
工具提示：{
自定义：函数（ToolTimpodel）{
//工具提示元素
var tooltipEl=document.getElementById（'chartjs-tooltip'）；
//在第一次渲染时创建元素
如果（！工具管）{
tooltipEl=document.createElement（'div'）；
tooltipEl.id='chartjs tooltip'；
tooltipEl.innerHTML=“”
document.body.appendChild（工具管道）；
}
//如果没有工具提示，则隐藏
如果（ToolTimpodel.opacity==0）{
tooltipEl.style.opacity=0；
返回；
}
//设置插入符号位置
移除（'Upper'、'Down'、'no transform'）；
如果（ToolTimpodel.yAlign）{
添加（tooltipModel.yAlign）；
}否则{
tooltipEl.classList.add（'no-transform'）；
}
函数getBody（bodyItem）{
返回bodyItem.line；
}
//设置文本
如果（ToolTimpodel.body）{
var titleLines=tooltipModel.title | |[]；
var bodyLines=tooltipModel.body.map（getBody）；
var innerHtml=''；
标题行。forEach（函数（标题）{
innerHtml+=''+标题+''；
});
innerHtml+=''；
bodyLines.forEach（函数（body，i）{
var colors=tooltipModel.labelColors[i]；
var style='background:'+colors.backgroundColor；
样式+='；边框颜色：'+colors.borderColor；
样式+='；边框宽度：2px'；
var span=''；
innerHtml+=''+span+body+''；
});
innerHtml+=''；
var tableRoot=tooltipEl.querySelector（'table'）；
tableRoot.innerHTML=innerHTML；
}
//'这'将是整个工具提示
var position=this.\u chart.canvas.getBoundingClientRect（）；
//显示、定位和设置字体样式
tooltipEl.style.opacity=1；
tooltipEl.style.left=position.left+tooltipModel.caretX+'px'；
tooltipEl.style.top=position.top+tooltipModel.caretY+'px'；
tooltipEl.style.fontFamily=ToolTimpodel.\fontFamily；
tooltipEl.style.fontSize=tooltipModel.fontSize；
tooltipEl.style.fontStyle=tooltipModel.\u fontStyle；
tooltipEl.style.padding=tooltipModel.yPadding+'px'+tooltipModel.xPadding+'px'；
}
},
回答：是的，
MaintaintAspectRatio:false
})
}
})
var vm=新的Vue({
el:“.app”，
数据：{
信息：“你好，世界”
}
})

---

从html中删除此项=

工具提示：{ 添加这一行=已启用：false，

---

自定义：函数（ToolTimpodel）

删除请不要使用注释部分获取答案的其他部分，而是编辑答案以包含所有信息。通过这样做，请添加一些解释，以便其他人可以从您的答案中学习