我正在chart.JS中创建一个图表，希望查看者能够将鼠标悬停在圆环图的特定部分上，并获得数据和数据的自定义描述。对于下面的例子，我们通过网络和一系列采访寻找相关的研究项目。现在，它显示了字段的名称和相应的数据。除此之外，我还想为用户定义字段。例如，当有人在基于Web的搜索上徘徊时，我希望他们看到：
基于Web的检索：75我们通过Web抓取提取了相关研究项目的扫描
同样，我想添加一个定义面试字段的描述。我以前添加过工具提示，但它总是类似于[static string]+[data]。我以前不必为每个数据点创建自定义定义。感谢您的帮助。另请参阅我的CodePen：https://codepen.io/tenebris_silentio/pen/abdgXqg<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project Overview</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<div class="container">
<div class="row my-3">
<div class="col">
<p class="sansserif">
<h3>Project Overview</h3></p>
</div>
</div>
<div class="row py-2">
<div class="col-md-4 py-1">
<div class="card" style="width: 33rem;">
<div class="card-body">
<canvas id="chDonut1"></canvas>
</div>
</div>
</div>
<script>
/* chart.js chart examples */
Chart.pluginService.register({
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 124).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = "";
switch(chart.chart.canvas.id){
case "chDonut1":
text = "Method";
break;
}
var textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
});
// chart colors
var colors = ['#007bff','#28a745','#333333','#c3e6cb','#dc3545','#6c757d'];
var donutOptions = {
cutoutPercentage: 85,
legend: {position:'bottom', padding:5, labels: {pointStyle:'circle', usePointStyle:true}}
};
// donut 1
var chDonutData1 = {
labels: ['Web-based search', 'Interviews'],
datasets: [
{
backgroundColor: colors.slice(0,2),
borderWidth: 0,
data: [75, 25]
}
]
};
var chDonut1 = document.getElementById("chDonut1");
if (chDonut1) {
new Chart(chDonut1, {
type: 'pie',
data: chDonutData1,
options: donutOptions
});
}
</script>
您可以定义一组工具提示回调函数来获得所需的结果。这可能看起来如下：
tooltips: {
callbacks: {
title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
label: (tooltipItems, data) => 'Count: ' + data.datasets[0].data[tooltipItems.index],
footer: (tooltipItems, data) => ['', 'Infos:'].concat(data.datasets[0].info[tooltipItems[0].index])
}
}
请注意，在
footer回调中，我返回在data对象内部定义的名为info的数组中定义的文本。
datasets: [{
...
info: [
['This is the description', 'for Web-based search ...'],
['This is the description', 'for Interviews ...']
]
}]
请查看下面修改后的代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project Overview</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<div class="container">
<div class="row my-3">
<div class="col">
<p class="sansserif">
<h3>Project Overview</h3>
</p>
</div>
</div>
<div class="row py-2">
<div class="col-md-4 py-1">
<div class="card" style="width: 33rem;">
<div class="card-body">
<canvas id="chDonut1"></canvas>
</div>
</div>
</div>
<script>
/* chart.js chart examples */
Chart.pluginService.register({
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 124).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = "";
switch (chart.chart.canvas.id) {
case "chDonut1":
text = "Method";
break;
}
var textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
});
// chart colors
var colors = ['#007bff', '#28a745', '#333333', '#c3e6cb', '#dc3545', '#6c757d'];
var donutOptions = {
cutoutPercentage: 85,
legend: {
position: 'bottom',
padding: 5,
labels: {
pointStyle: 'circle',
usePointStyle: true
}
},
tooltips: {
callbacks: {
title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
label: (tooltipItems, data) => 'Count: ' + data.datasets[0].data[tooltipItems.index],
footer: (tooltipItems, data) => ['', 'Infos:'].concat(data.datasets[0].info[tooltipItems[0].index])
}
}
};
// donut 1
var chDonutData1 = {
labels: ['Web-based search', 'Interviews'],
datasets: [{
backgroundColor: colors.slice(0, 2),
borderWidth: 0,
data: [75, 25],
info: [
['This is the description', 'for Web-based search ...'],
['This is the description', 'for Interviews ...']
]
}]
};
var chDonut1 = document.getElementById("chDonut1");
if (chDonut1) {
new Chart(chDonut1, {
type: 'pie',
data: chDonutData1,
options: donutOptions
});
}
</script>
</html>