ChartJS 显示仅包含每年的月份的 x 轴

Question

我正在使用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
                }
            }]
        }
    }
});

- Tom Truyen

Answer 1

在x轴上使用时间类型。通过time：{unit：'month'}（始终是月份）或minUnit（如果需要，则为月份和年份），可以获得月份标签。

作为数据标签，您需要传递一个Date或moment

scales: {
  xAxes: [{
    type: 'time',
    time: {
      unit: 'month'
    }
  }],
}

这里 是一个完整的示例。 请查看Moment文档，特别是有关日期创建和解析的部分。 Chart.js 使用Moment日期，因此它非常重要（而且非常容易）。

- HeadhunterKev