我有一个堆积的条形图,我想在其中显示定性分析师需要完成专题编码过程的项目比例。但是,网页的访问者不一定知道上下文,而只是想在工具提示中提供一些详细信息。我有两类:(1)项目总数和(2)编码项目。在“剩余项目:170”下的“项目总数”工具提示的新行中,我想要“描述:尚未进行质量编码的其余项目”。同样,对于“已编码项目:70”,我希望在新行中显示“描述:已进行质量编码的项目数。”
我的堆叠条形图的最后一个工作版本在这里:https://codepen.io/tenebris_silentio/pen/ZEWzXyr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio Review 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"/>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<div class="container">
<div class="row my-3">
<div class="col">
<p class="sansserif"><br>
</div>
</div>
<div class="col-md-6 py-1">
<div class="card" style="width: 36rem;">
<div class="card-body">
<canvas id="chBar"></canvas>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script>
// chart colors
var colors = ['#007bff','#28a745','#333333','#c3e6cb','#dc3545','#6c757d'];
/* bar chart */
var ctx = document.getElementById('chBar');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Proportion of Coded Projects'],
datasets: [
{
label: ['Coded Projects'],
data: [70],
info: [
['This refers to projects that have not been qualitatively coded using the TDF.'],
backgroundColor: '#D6E9C6',
}],
{
label: 'Remaining Projects',
data: [170],
backgroundColor: colors.slice(0,1),
info: [
['This refers to total number of projects left to code.'],
},
]
},
options: {
tooltips: {
callbacks: {
title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
label: (tooltipItems, data) => 'Count: ' + data.datasets[0].data[tooltipItems.index],
footer: (tooltipItems, data) => ['', 'Description:'].concat(data.datasets[0].info[tooltipItems[0].index])
}
}
scales: {
xAxes: [{ stacked: true }],
yAxes: [{ stacked: true }]
}
}
});
</script>
答案 0 :(得分:1)
您的tooltips.callbacks
应该如下所示:
tooltips: {
callbacks: {
title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ' ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index],
footer: (tooltipItems, data) => ['', 'Description:'].concat(data.datasets[tooltipItems[0].datasetIndex].info)
}
}
请在下面查看您的修改后的代码:
var colors = ['#007bff', '#28a745', '#333333', '#c3e6cb', '#dc3545', '#6c757d'];
var ctx = document.getElementById('chBar');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Proportion of Coded Projects'],
datasets: [{
label: 'Coded Projects',
data: [70],
backgroundColor: '#D6E9C6',
info: [
['This refers to projects that have not'],
['been qualitatively coded using the TDF.']
]
},
{
label: 'Remaining Projects',
data: [170],
backgroundColor: colors.slice(0, 1),
info: [
['This refers to total number'],
['of projects left to code.']
]
}
]
},
options: {
tooltips: {
callbacks: {
title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ' ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index],
footer: (tooltipItems, data) => ['', 'Description:'].concat(data.datasets[tooltipItems[0].datasetIndex].info)
}
},
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chBar"></canvas>