我在chart.js中制作折线图,并且我遇到了一个问题,我试图在线上绘制点数据,但它忽略了我给出的x值,而是将它们放在第一个可用的标签上。
this.myLineChart = new Chart(this.ctx, {
type: 'line',
data: {
labels: [0,2,4,6,8,10],
datasets: [{
label: 'mylabel1',
fill: false,
backgroundColor: 'blue',
borderColor: 'blue',
data: [{
x: 2.5,
y: 85
}, {
x: 3.5,
y: 85
}]
}]
},
options: {
title: {
display: true,
text: 'mytitle1'
},
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 70,
suggestedMax: 100
}
}]
}
}
});
但我希望这条线的x值为2.5和3.5,因此它位于2和4标签之间。
我应该在代码中更改什么才能使其按照我的意愿运行?
答案 0 :(得分:4)
在这种情况下,您不需要使用labels
数组。而是在图表选项中将x轴'类型设置为linear
以及x轴'刻度的最小值和最大值(也可能是stepSize
),如下所示:
xAxes: [{
type: 'linear',
ticks: {
suggestedMin: 0,
suggestedMax: 10,
stepSize: 2
}
}]
ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇᴀᴍᴘʟᴇ
myLineChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'mylabel1',
fill: false,
backgroundColor: 'blue',
borderColor: 'blue',
data: [{
x: 2.5,
y: 85
}, {
x: 3.5,
y: 85
}]
}]
},
options: {
title: {
display: true,
text: 'mytitle1'
},
scales: {
xAxes: [{
type: 'linear',
ticks: {
suggestedMin: 0,
suggestedMax: 10,
stepSize: 2 //interval between ticks
}
}],
yAxes: [{
display: true,
ticks: {
suggestedMin: 70,
suggestedMax: 100
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>