我正在尝试制作一个水平条形图,在水平轴上的特定点上有3条重叠的垂直线。我使用的是ChartJS v2.8和注解插件(v 0.5.5)。我想为3条垂直线中的每一条添加一个绑定标签(用注解创建),如图所示。下面是我使用的脚本。
<canvas id="myChart" height="600" ></canvas>
JS脚本:
let per10 = 3.718,
per50 = 5,
per90 = 6.282;
let scales = ["SEMESTER 1","Course 1","Course 2","Course 3","Course 4",,"SEMESTER 2","Course 1","Course 2","Course 3","Course 4",,"SEMESTER 1","Course 1","Course 2","Course 3","Course 4",,"SEMESTER 1","Course 1","Course 2","Course 3","Course 4",,"SEMESTER 1","Course 1","Course 2","Course 3","Course 4",,"SEMESTER 1","Course 1","Course 2","Course 3","Course 4",,"Course 5" ]
let scores = [3.6, 6.1, 7.4, 4.7, 5.6, , 5.9, 4.1, 3.9, 6.4, 5.9, , 5.9, 4.1, 3.9, 6.4, 5.9, , 5.9, 4.1, 3.9, 6.4, 5.9, , 5.9, 4.1, 3.9, 6.4, 5.9, , 5.9, 4.1, 3.9, 6.4, 5.9, ,7.5];
var ctx = document.getElementById("myChart");
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips.enabled = false;
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: scales,
datasets: [{
label: 'Score',
display: false,
showTooltip: false,
data: scores,
backgroundColor: 'royalBlue',
borderColor: '#000000',
borderWidth: 0,
fill: false
}
]
},
options: {
responsive: true,
showTooltips: false,
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: false,
},
ticks: {
beginAtZero: true,
fixedStepSize: 1
},
gridLines: {display: false}
}],
xAxes: [{
display: true,
min: 0,
max: 8,
scaleLabel: {
display: false,
},
ticks: {
autoSkip: false,
stepSize: 2,
beginAtZero: true,
},
position: 'bottom',
gridLines: {display: false}
}]
},
title: {
display: true,
text: 'Scores'
},
events: [],
autocolors: false,
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: per10,
borderColor: '#db7093',
borderWidth: 2,
label: {
display: true,
value: "10%"
}
},
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: per50,
borderColor: '#98fb98',
borderWidth: 2,
label: {
display: true,
value: "50%"
}
},
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: per90,
borderColor: '#add8e6',
borderWidth: 2,
label: {
display: true,
value: "90%"
}
},
]
},
animation: {
duration: 0,
onComplete: function() {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseLine = 'bottom';
ctx.fillStyle = 'white';
this.data.datasets.forEach(function(dataset) {
console.log(dataset);
for (var i = 0; i < dataset.data.length; i++) {
for (var key in dataset._meta) {
var model = dataset._meta[key].data[i]._model;
model.y = model.y + 4;
model.x = model.x -12;
if (dataset.data[i] < 0.75) {
model.x = model.x + 5;
};
ctx.fillText(dataset.data[i], model.x, model.y);
}
}
});
}
}
}
});```
另一个问题:我怎样才能减少酒吧之间的空间?任何帮助将不胜感激。
2条答案
按热度按时间bbmckpt71#
由于您使用的是旧版本的chartjs-plugin-annotation,因此需要在此处查阅行注解的相关文档。
这将引导您找到以下解决方案
请看一下您修改后的JSFiddle,看看它是如何工作的。
eqfvzcg82#
若要在缐条注解中定义标示,对于0.55版,您必须使用
enabled
和content
,而不是display
和value
。