我正在使用Cordova制作移动应用程序,它允许我使用HTML、CSS和JavaScript。目前我正在使用SQLite作为数据库(与mySQL几乎相同),但这并不是很重要。我只是从数据库中获取数据。我获取的数据包括人的体重和添加到数据库中的日期。
我使用线性图表,将体重显示在Y轴上,日期显示在X轴上。
我想做的是只在x轴上显示月份标签,但仍然使其能够分别显示每天的数据。例如,如果我在1月1日、1月2日和1月3日添加了数据,我希望能够在图表上看到这三天的数据点,但在X轴上只显示“1月”。
我一直在研究Chart.JS中的“时间”选项,但无法弄清楚我应该如何做。
HTML:
<canvas id="myChart" style="margin-top: 20px;"></canvas>
JavaScript:
//these are the arrays that I will fill dynamically. Labels will be my months and data will be the weight
var labels = [];
var data = [];
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: labels,
datasets: [{
backgroundColor: 'rgba(255, 119, 0, 0.5)',
borderColor: 'rgba(255, 119, 0, 1)',
data: data
}]
},
// Configuration options go here
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});