我使用的是Chart.js库的v 3.8,下面是代码:
function createLineGraph(chartObject,chartId,data,labels,xLabel,yLabel) {
// Create a new Chart.js instance
var ctx = document.getElementById(chartId).getContext('2d');
chartObject = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: data
},
options: {
responsive: true,
scales: {
x: {
ticks:{
display: true,
autoSkip: true,
maxTicksLimit: 10,
},
title: {
display: true,
text: xLabel
},
grid: {
display: false,
text: xLabel
}
},
y: {
beginAtZero: true,
min: 0,
max: 200,
ticks: {
tickSpacing: 50,
autoSkip:true,
},
title: {
display: true,
text: yLabel
},
grid: {
display: false,
}
}
}
}
});
chartObject.update();
}
超文本标记语言
<canvas id="chart"></canvas>
现在它显示如下:
理想情况下,我看起来像这样:
2条答案
按热度按时间3pvhb19x1#
我已经有一段时间没有使用chart.js了,但是据我所知,这两个图表的高度是不同的,因此行间距很窄。尝试使用样式来增加高度,我认为差距也会增加。
jgwigjjp2#
您可以使图形的可视区域更大,如果可能,使用CSS增加图表的大小。如果不可能,您可以:
1.将图例移到旁边,
1.缩短x轴的标签,因为它是一个日期时间,最好的方法是将x轴设置为
time
类型(但是您必须添加一些库, checkout the documentation)x一个一个一个一个x一个一个二个x