javascript - 尝试使用chartsjs在圆环图中创建自定义工具提示,但它不起作用
问题描述
我有一个两部分的问题:
问题1: 我正在尝试使用chartsjs 为我拥有的圆环图创建一个自定义工具提示。我遇到了一个问题,当我运行代码(在 jsfiddle 上)时,甜甜圈图会出现,但是当我将鼠标悬停在它上面时,它会消失。我收到以下错误消息:无法将属性“innerHTML”设置为 null。
问题 2:我正在尝试添加第二个工具提示,但在我拥有的甜甜圈中添加了一个自定义工具提示。我将它保存为以下内容:labels2 = [“one”,“two”,“three”]。我遵循了chartsjs中自定义工具提示的文档, 并创建了一个我认为会显示工具提示的函数,我目前在Fiddle中将其标记为label2。(第 105 行)。但是,它不起作用。 https://jsfiddle.net/silosc/51pja7ze/36/
Here is the code for the function:
// HTML
<canvas id="myChart" height="100"></canvas>
//JS
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Red", "Blue", "Yellow"],
labels2: ["One", "Two", "Three"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
tooltips: {
// Disable the on-canvas tooltip
enabled: false,
custom: function(tooltipModel){
// Tooltip Element
var tooltipEl = document.getElementById("myChart");
// Create element on first render
if (!tooltipEl){
tooltipEl = document.getElementById("div");
tooltipEl.id = 'myChart';
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 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();
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px'
tooltipEl.style.pointerEvents = 'none';
},
callbacks: {
title: function(tooltipItem, data) {
return data['labels'][tooltipItem[0]['index']];
},
label: function(tooltipItem, data) {
return data['datasets'][0]['data'][tooltipItem['index']];
},
label2: function(tooltipItem, data){
return data['data'][0]['data'][tooltipItem['index']];
},
afterLabel: function(tooltipItem, data) {
var dataset = data['datasets'][0];
var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100)
return '(' + percent + '%)';
}
},
backgroundColor: '#FFF',
titleFontSize: 16,
titleFontColor: '#0066ff',
bodyFontColor: '#000',
bodyFontSize: 14,
displayColors: false
}
}
});
有人可以帮帮我吗?我从来没有做过自定义工具提示,所以这对我来说是第一次,我迷路了。
解决方案
关于问题 1:一切都消失了,因为您将图表画布用作工具提示元素,因此它被清空: var tooltipEl = document.getElementById("myChart");
如果您坚持文档中提供的示例 ( https://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips ),它应该会让您走上正轨。所以而不是
var tooltipEl = document.getElementById("myChart");
// Create element on first render
if (!tooltipEl){
tooltipEl = document.getElementById("div");
tooltipEl.id = 'myChart';
tooltipEL.innerHTML = '<table></table>';
document.body.appendChild(tooltipEl);
}
利用
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);
}
推荐阅读
- r - 编写函数以帮助合并到不同的数据集
- c# - 当有来自客户端的新数据时,C# 如何使 TCP 服务器引发事件/回调
- java - Finding unique strings in two arraylists of objects
- html - 如何修复我的表单以始终可见?
- bash - 如何使用 BASH 将 .txt 文件数据存储在 CSV 文件的不同列中?
- python - 使用 Python、socket() 和代理类型功能的流量重定向器
- c# - 为所有用户更改 Blazor 组件
- node.js - 我正在使用 node/express 和 pg 库与 PostgreSQL 进行通信。当我的模型返回数据时,属性是小写的。为什么?
- javascript - RxJS Operator 延迟处理后续事件
- reactjs - 带有 React-leaflet version3 的传单地图上的自定义按钮