Javascript 图表x轴仅显示一年中的几个月

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天都是点,

所以我使用Cordova制作了这个移动应用程序,它允许我使用HTML、CSS和JavaScript。我目前正在使用SQLite作为数据库(工作原理几乎与mySQL相同),但这并不重要。我所做的就是从数据库中获取数据。我得到了数据被添加到数据库的日期和一个人的体重

我使用的是一个线条图,它在Y轴上显示重量,在X轴上显示数据

我想做的只是在x轴上以标签的形式显示月份,但仍然要使它以单独的方式显示每天的数据。例如,如果我添加1月1日、1月2日和1月3日的数据。我希望能够在我的图表上看到所有3天都是点,但在X轴上应该只显示“一月”

我一直在研究Chart.JS的“time”选项,但我真的不知道该怎么做

HTML:


使用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'
    }
  }],
}