Javascript 图表x轴仅显示一年中的几个月
所以我使用Cordova制作了这个移动应用程序,它允许我使用HTML、CSS和JavaScript。我目前正在使用SQLite作为数据库(工作原理几乎与mySQL相同),但这并不重要。我所做的就是从数据库中获取数据。我得到了数据被添加到数据库的日期和一个人的体重 我使用的是一个线条图,它在Y轴上显示重量,在X轴上显示数据 我想做的只是在x轴上以标签的形式显示月份,但仍然要使它以单独的方式显示每天的数据。例如,如果我添加1月1日、1月2日和1月3日的数据。我希望能够在我的图表上看到所有3天都是点,但在X轴上应该只显示“一月” 我一直在研究Chart.JS的“time”选项,但我真的不知道该怎么做 HTML:Javascript 图表x轴仅显示一年中的几个月,javascript,sqlite,cordova,chart.js,Javascript,Sqlite,Cordova,Chart.js,所以我使用Cordova制作了这个移动应用程序,它允许我使用HTML、CSS和JavaScript。我目前正在使用SQLite作为数据库(工作原理几乎与mySQL相同),但这并不重要。我所做的就是从数据库中获取数据。我得到了数据被添加到数据库的日期和一个人的体重 我使用的是一个线条图,它在Y轴上显示重量,在X轴上显示数据 我想做的只是在x轴上以标签的形式显示月份,但仍然要使它以单独的方式显示每天的数据。例如,如果我添加1月1日、1月2日和1月3日的数据。我希望能够在我的图表上看到所有3天都是点,
使用x轴中的时间类型。使用
时间:{unit:'month'}
(始终为月)或分钟(如有必要,可以使用月和年)可以获得月份标签
作为数据标签,您需要传递日期
或时刻
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month'
}
}],
}
这是一个完整的例子。
检查日期,尤其是日期的创建和解析。Chart.js适用于时刻日期,因此它非常重要(顺便说一句,非常简单)
//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
}
}]
}
}
});
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month'
}
}],
}