我正在使用Chart.js库来创建折线图,并且由于需要大量标签,我使用 Limit labels number on Chartjs line chart 中的方法跳过了一些标签。问题,另见下文。
我的图表看起来完全符合我的要求,但有一个异常(exception): 第二个标签正常位置处会出现一条随机黑线。
这是我用来创建此图表的代码:
Chart.defaults.global.elements.point.radius = 2;
var ctx = document.getElementById("graph-1-met");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: [0,'','','','','',1,'','','','','',2,'','','','','',3,'','','','','',4,'','','','','',5,'','','','','',6,'','','','','',7,'','','','','',8,'','','','','',9,'','','','','',10,'','','','','',11,'','','','','',12,'','','','','',13,'','','','','',14,'','','','','',15,'','','','',''],
datasets: [
{
data: [65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55],
backgroundColor: "rgba(0,204,255,0.2)",
borderColor: "rgba(0,204,255,1)",
borderWidth: 2
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Blowing Time (min)'
}
}],
yAxes: [{
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Undissolved Lime (tonnes)'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="graph-1-met"></canvas>
我想注意一些事情:
- 如果我使用实际标签(例如
[0,1,2,3,4,...]
),则黑线不会出现。这让我相信我使用空字符串 (''
) 出了问题。 当我将标签更改为:
[0,1,'','',...]
时,黑线现在出现在第一次出现'' 时
。在本例中为第三个标签位置。为了解决这个问题,我尝试将网格线的颜色设置为白色,这导致黑线不再出现。不幸的是,这个解决方案使图表看起来更糟。
问题:为什么会出现这条黑线,有办法去掉吗?
最佳答案
好吧,这可能很奇怪,但我刚刚从 labels
数组中删除了每个 ''
,并且它按照应有的方式呈现。
<强> jsFiddle
Chart.defaults.global.elements.point.radius = 2;
var ctx = document.getElementById("graph-1-met");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: [0, , , , , 1, , , , , , 2, , , , , , 3, , , , , , 4, , , , , , 5, , , , , , 6, , , , , , 7, , , , , , 8, , , , , , 9, , , , , , 10, , , , , , 11, , , , , , 12, , , , , , 13, , , , , , 14, , , , , , 15, , , , , ],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55],
backgroundColor: "rgba(0,204,255,0.2)",
borderColor: "rgba(0,204,255,1)",
borderWidth: 2,
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Blowing Time (min)'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Undissolved Lime (tonnes)'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="graph-1-met"></canvas>
关于javascript - Chart.js 的垂直网格线问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39135489/