使用 chartjs,我设置了以下图表:
function myFunction(){
var options = {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5"],
datasets: [
{
data: [26, 26, 29, 28, 29],
borderWidth: 2,
fill: false,
lineTension: 0
},
{
data: [26, 26, 33, 28, 30],
borderWidth: 2,
fill: false,
lineTension: 0,
}
]
},
options: {
scales: {
yAxes: [{
display: false,
ticks: {
suggestedMin: 0,
beginAtZero: true
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
}
我想将点和 x 轴数字向右移动,以便它们位于轴线之间。 (如:1 介于 1 和 2 之间;2 介于 2 和 3 之间;等等)见下文:
我该怎么做?
最佳答案
以下是您可以执行此操作的方法:
ꜰɪʀꜱᴛ
将默认图表类型设置为 bar
,如下所示:
var options = {
type: 'bar',
data: {
...
ꜱᴇᴄᴏɴᴅ
将第一个数据集的类型设置为line
,这样:
...
datasets: [{
type: 'line',
data: [26, 26, 29, 28, 29],
...
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ⧩
function myFunction() {
var options = {
type: 'bar',
data: {
labels: ["1", "2", "3", "4", "5"],
datasets: [{
type: 'line',
data: [26, 26, 29, 28, 29],
borderColor: 'rgba(0, 119, 220, 1)',
borderWidth: 2,
fill: false,
lineTension: 0
}, {
data: [26, 26, 33, 28, 30],
borderWidth: 2
}]
},
options: {
scales: {
yAxes: [{
display: false,
ticks: {
suggestedMin: 0,
beginAtZero: true
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
}
myFunction();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="chartJSContainer"></canvas>
关于javascript - 如何使用 chartjs 将 x 轴值和线点移动到两条 x 轴线的中间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45587663/