Javascript和Chart.JS-在3个甜甜圈孔图表中获取唯一文本的问题-所有3个甜甜圈孔显示相同的文本
我有点像一个Chart.JS noob，我几乎完成了一个数据仪表板。我并不热衷于添加标题，而是在更模糊的地方添加描述符。我有一行3个甜甜圈图表，都有不同的数据和字段。我想在甜甜圈孔中插入这三个的唯一文本。例如，我想一个说“来源”，一个说“资助者”，一个说“搜索方法”——都在各自的甜甜圈洞里。我遇到了一些代码，可以在中间添加文本smack，但是它太大了，只允许我插入一个文本字符串。不幸的是，所有三个甜甜圈孔的内部显示相同的文本。我知道我尝试在甜甜圈孔中包含文本的方法是错误的，但我想证明我已经尝试过了。感谢您的帮助 代码笔在这里：Javascript和Chart.JS-在3个甜甜圈孔图表中获取唯一文本的问题-所有3个甜甜圈孔显示相同的文本,javascript,html,css,charts,chart.js,Javascript,Html,Css,Charts,Chart.js,我有点像一个Chart.JS noob，我几乎完成了一个数据仪表板。我并不热衷于添加标题，而是在更模糊的地方添加描述符。我有一行3个甜甜圈图表，都有不同的数据和字段。我想在甜甜圈孔中插入这三个的唯一文本。例如，我想一个说“来源”，一个说“资助者”，一个说“搜索方法”——都在各自的甜甜圈洞里。我遇到了一些代码，可以在中间添加文本smack，但是它太大了，只允许我插入一个文本字符串。不幸的是，所有三个甜甜圈孔的内部显示相同的文本。我知道我尝试在甜甜圈孔中包含文本的方法是错误的，但我想证明我已经尝试过
投资组合审查概述
VARC投资组合-实际访问与感知访问
综述
/*js图表示例*/
//图表颜色
变量颜色=['#007bff'、'#28a745'、'#33333'、'#c3e6cb'、'#dc3545'、'#6c757d']；
/*大折线图*/
var chLine=document.getElementById（“chLine”）；
var图表数据={
标签：[“9月19日”、“10月19日”、“11月19日”、“12月19日”、“1月20日”、“2月20日”、“3月20日”、“4月20日”、“5月20日”、“6月20日”、“7月20日”]，
数据集：[{
数据：[20,14,44,33,22,33,10,40,30,20,11]，
标签：“#按月份确定的项目”，
背景色：“透明”，
边框颜色：颜色[0]，
边框宽度：4，
pointBackgroundColor:颜色[0]
}
// {
//数据：[639465493478589632674]，
//背景颜色：颜色[3]，
//边框颜色：颜色[1]，
//边框宽度：4，
//pointBackgroundColor:颜色[1]
// }
]
};
如果（chLine）{
新图表（chLine{
键入：“行”，
数据：图表数据，
选项：{
标题：{
显示：假，
正文：“#按月份确定的项目”
},
比例：{
雅克斯：[{
scaleLabel：{
显示：对，
标签字符串：“#已确定的项目”
}
}],
xAxes：[{
滴答声：{
贝吉纳泽罗：错
}
}]
},
图例：{
显示：假，
},
回答：对
}
});
}
/*条形图*/
var ctx=document.getElementById（'chBar'）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：[“编码项目的比例”]，
数据集：[
{
标签：“编码项目”，
数据：[70]，
背景颜色：“#D6E9C6”，
},
{
标签：“剩余项目”，
数据：[170]，
背景颜色：颜色。切片（0,1），
},
]
},
选项：{
比例：{
xAxes:[{stacked:true}]，
雅克斯：[{stacked:true}]
}
}
});
/*3个甜甜圈图表*/
var donutOptions={
门诊人数：85人，
图例：{位置：'bottom'，填充：5，标签：{pointStyle:'circle'，usePointStyle:true}
};
//甜甜圈1
变量chdonutdata={
标签：[“基于网络的搜索”，“其他”]，
数据集：[
{
背景颜色：颜色。切片（0,2），
边框宽度：0，
数据：[75,25]
}
]
};
var chDonut1=document.getElementById（“chDonut1”）；
if（chDonut1）{
新图表（chDonut1{
键入“pie”，
数据：chdonutdata 1，
选项：donutOptions
});
}
Chart.pluginService.register({
绘制前：函数（图表）{
变量宽度=chart.chart.width，
高度=chart.chart.height，
ctx=chart.chart.ctx；
ctx.restore（）；
变量fontSize=（高度/114）.toFixed（2）；
ctx.font=fontSize+“em无衬线”；
ctx.textb基线=“中间”；
var text=“项目来源”，
textX=数学圆（（宽度-ctx.measureText（text.width）/2），
textY=高度/2；
ctx.fillText（text，textX，textY）；
ctx.save（）；
}
});
//甜甜圈2
变量chdonutdata={
标签：['AHRQ'、'NIH'、'私人资助'、'当地资助']，
数据集：[
{
背景颜色：颜色。切片（0,6），
边框宽度：0，
数据：[40,20,10,10]
}
]
};
var chDonut2=document.getElementById（“chDonut2”）；
if（chDonut2）{
新图表（chDonut2{
键入“pie”，
数据：chdonutdata 2，
选项：donutOptions
});
}
//甜甜圈3
变量chdonutdata={
标签：[
“NIH出口商”、“Clinicaltrials.gpv”、“其他”]，
数据集：[
{
背景颜色：颜色。切片（0,3），
边框宽度：0，
数据：[21,45,55]
}
]
<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>
<body>
<title>VARC Portfolio - Actual Access versus Perceived Access</title>
<head>
<!-- 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">
<h4>Review Overview</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 py-1">
<div class="card" style="width: 34rem;">
<div class="card-body">
<canvas id="chLine"></canvas>
</div>
</div>
</div>
<div class="col-md-6 py-1">
<div class="card" style="width: 34rem;">
<div class="card-body">
<canvas id="chBar"></canvas>
</div>
</div>
</div>
</div>
<div class="row py-2">
<div class="col-md-4 py-1">
<div class="card" style="width: 23rem;">
<div class="card-body">
<canvas id="chDonut1"></canvas>
</div>
</div>
</div>
<div class="col-md-4 py-1">
<div class="card" style="width: 23rem;">
<div class="card-body">
<canvas id="chDonut2"></canvas>
</div>
</div>
</div>
<div class="col-md-4 py-1">
<div class="card" style="width: 23rem;">
<div class="card-body">
<canvas id="chDonut3"></canvas>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script>
/* chart.js chart examples */
// chart colors
var colors = ['#007bff','#28a745','#333333','#c3e6cb','#dc3545','#6c757d'];
/* large line chart */
var chLine = document.getElementById("chLine");
var chartData = {
labels: ["Sept 19", "Oct 19", "Nov 19", "Dec 19", "Jan 20", "Feb 20", "Mar 20", "Apr 20", "May 20", "Jun 20", "Jul 20"],
datasets: [{
data: [20, 14, 44, 33, 22, 33, 10, 40, 30, 20, 11],
label: '# of Projects Identified by Month',
backgroundColor: 'transparent',
borderColor: colors[0],
borderWidth: 4,
pointBackgroundColor: colors[0]
}
// {
// data: [639, 465, 493, 478, 589, 632, 674],
// backgroundColor: colors[3],
// borderColor: colors[1],
// borderWidth: 4,
// pointBackgroundColor: colors[1]
// }
]
};
if (chLine) {
new Chart(chLine, {
type: 'line',
data: chartData,
options: {
title: {
display: false,
text: '# of Projects Identified by Month'
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: '# of Projects Identified'
}
}],
xAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false,
},
responsive: true
}
});
}
/* 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],
backgroundColor: '#D6E9C6',
},
{
label: 'Remaining Projects',
data: [170],
backgroundColor: colors.slice(0,1),
},
]
},
options: {
scales: {
xAxes: [{ stacked: true }],
yAxes: [{ stacked: true }]
}
}
});
/* 3 donut charts */
var donutOptions = {
cutoutPercentage: 85,
legend: {position:'bottom', padding:5, labels: {pointStyle:'circle', usePointStyle:true}}
};
// donut 1
var chDonutData1 = {
labels: ['Web-based search', 'Other'],
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
});
}
Chart.pluginService.register({
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = "Project Sources",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
});
// donut 2
var chDonutData2 = {
labels: ['AHRQ', 'NIH', 'Privately Funded', 'Locally Funded'],
datasets: [
{
backgroundColor: colors.slice(0,6),
borderWidth: 0,
data: [40, 20, 10, 10]
}
]
};
var chDonut2 = document.getElementById("chDonut2");
if (chDonut2) {
new Chart(chDonut2, {
type: 'pie',
data: chDonutData2,
options: donutOptions
});
}
// donut 3
var chDonutData3 = {
labels: [
'NIH ExPORTER', 'Clinicaltrials.gpv', 'Other'],
datasets: [
{
backgroundColor: colors.slice(0,3),
borderWidth: 0,
data: [21, 45, 55]
}
]
};
var chDonut3 = document.getElementById("chDonut3");
if (chDonut3) {
new Chart(chDonut3, {
type: 'pie',
data: chDonutData3,
options: donutOptions
});
}
/* 3 line charts */
var lineOptions = {
legend:{display:true},
tooltips:{interest:false,bodyFontSize:11,titleFontSize:11},
scales:{
xAxes:[
{
ticks:{
display:false
},
gridLines: {
display:false,
drawBorder:false
}
}
],
yAxes:[{display:false}]
},
layout: {
padding: {
left: 6,
right: 6,
top: 4,
bottom: 6
}
}
};
</script>
<script>
/* chart.js chart examples */
// chart colors
var colors = ['#007bff','#28a745','#333333','#c3e6cb','#dc3545','#6c757d'];
/* large line chart */
var chLine = document.getElementById("chLine");
var chartData = {
labels: ["Sept 19", "Oct 19", "Nov 19", "Dec 19", "Jan 20", "Feb 20", "Mar 20", "Apr 20", "May 20", "Jun 20", "Jul 20"],
datasets: [{
data: [20, 14, 44, 33, 22, 33, 10, 40, 30, 20, 11],
label: '# of Projects Identified by Month',
backgroundColor: 'transparent',
borderColor: colors[0],
borderWidth: 4,
pointBackgroundColor: colors[0]
}
// {
// data: [639, 465, 493, 478, 589, 632, 674],
// backgroundColor: colors[3],
// borderColor: colors[1],
// borderWidth: 4,
// pointBackgroundColor: colors[1]
// }
]
};
if (chLine) {
new Chart(chLine, {
type: 'line',
data: chartData,
options: {
title: {
display: false,
text: '# of Projects Identified by Month'
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: '# of Projects Identified'
}
}],
xAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false,
},
responsive: true
}
});
}
/* 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],
backgroundColor: '#D6E9C6',
},
{
label: 'Remaining Projects',
data: [170],
backgroundColor: colors.slice(0,1),
},
]
},
options: {
scales: {
xAxes: [{ stacked: true }],
yAxes: [{ stacked: true }]
}
}
});
/* 3 donut charts */
var donutOptions = {
cutoutPercentage: 85,
legend: {position:'bottom', padding:5, labels: {pointStyle:'circle', usePointStyle:true}}
};
// donut 1
var chDonutData1 = {
labels: ['Web-based search', 'Other'],
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
});
}
Chart.pluginService.register({
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = "";
switch(chart.chart.canvas.id){
case "chDonut1":
text = "Sources";
break;
case "chDonut2":
text = "Funder";
break;
case "chDonut3":
text = "Search Method";
break;
}
var textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
});
// donut 2
var chDonutData2 = {
labels: ['AHRQ', 'NIH', 'Privately Funded', 'Locally Funded'],
datasets: [
{
backgroundColor: colors.slice(0,6),
borderWidth: 0,
data: [40, 20, 10, 10]
}
]
};
var chDonut2 = document.getElementById("chDonut2");
if (chDonut2) {
new Chart(chDonut2, {
type: 'pie',
data: chDonutData2,
options: donutOptions
});
}
// donut 3
var chDonutData3 = {
labels: [
'NIH ExPORTER', 'Clinicaltrials.gpv', 'Other'],
datasets: [
{
backgroundColor: colors.slice(0,3),
borderWidth: 0,
data: [21, 45, 55]
}
]
};
var chDonut3 = document.getElementById("chDonut3");
if (chDonut3) {
new Chart(chDonut3, {
type: 'pie',
data: chDonutData3,
options: donutOptions
});
}
/* 3 line charts */
var lineOptions = {
legend:{display:true},
tooltips:{interest:false,bodyFontSize:11,titleFontSize:11},
scales:{
xAxes:[
{
ticks:{
display:false
},
gridLines: {
display:false,
drawBorder:false
}
}
],
yAxes:[{display:false}]
},
layout: {
padding: {
left: 6,
right: 6,
top: 4,
bottom: 6
}
}
};
</script>