我有一个非常简单的条形图，其中每个数据点由日期（天）和数字组成。也许唯一的特点是并非涵盖每个日期（即有些日子没有数据点）。
绘制图表时，仅显示那些具有与其关联的数据点的日期。所有其他日期都被简单地省略。因此 x 轴分布不均匀并且会跳过值。
如何确保 X 轴真正呈线性且不会遗漏任何日期？
PS：这就是我的图表的定义方式：
chartData.datasets[0].data.push( {t: new Date('2019-02-01'), y: value});
// And so on...
var chart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
annotation: {
annotations: []
},
legend: {
display: false
},
scales: {
xAxes: [{
type: 'time',
unitStepSize: 1,
distribution: 'series',
time: {
unit: 'day'
},
}]
}
}
});
这是此问题的有效解决方案，适用于新版本的 Chart.jsv3.x
Chart.jsv3.2.1（不向后兼容v2.xx)
const ctx = document.getElementById('timeSeriesChart').getContext('2d');
const chartData = [
{x:'2019-01-08', y: 4},
{x:'2019-01-13', y: 28},
{x:'2019-01-14', y: 8},
{x:'2019-01-15', y: 18},
{x:'2019-01-16', y: 68},
{x:'2019-01-18', y: 48},
{x:'2019-01-19', y: 105},
{x:'2019-01-21', y: 72},
{x:'2019-01-23', y: 36},
{x:'2019-01-24', y: 48},
{x:'2019-01-25', y: 17},
{x:'2019-01-28', y: 30},
{x:'2019-01-29', y: 28},
{x:'2019-01-30', y: 25},
{x:'2019-01-31', y: 18},
{x:'2019-02-04', y: 25},
{x:'2019-02-05', y: 22},
{x:'2019-02-06', y: 17},
{x:'2019-02-07', y: 15}
];
const chart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
data: chartData,
backgroundColor: 'rgb(189,0,53)'
}]
},
options: {
plugins: {
legend: { //watch out: new syntax in v3.2.0, `legend` within `plugins`
display: false
},
title: { //watch out: new syntax in v3.2.0, `title` within `plugins`
display: false
}
},
scales: {
x: { //watch out: new syntax in v3.2.0 for xAxis
type: 'timeseries', // `time` vs `timeseries` later in images
time: {
unit: 'day'
},
ticks: { // Edit: added this to avoid overlapping - thanks for comment
minRotation: 85, // <-- just try any number
maxRotation: 90 // <-- just try any number
}
}
}
}
});<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- gets you latest version of Chart.js (now at v3.2.1) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
<!-- for x-Axis type 'time' or 'timeseries' to work, you need additional libraries -->
<!-- (like moment.js and its adapter) -->
<div>
<canvas id="timeSeriesChart"></canvas>
</div>Time笛卡尔轴
x: {
type: 'time'
按照您的要求使 x 轴“线性”，仍然显示没有数据的天数
Source: https://www.chartjs.org/docs/latest/axes/cartesian/time.html https://www.chartjs.org/docs/latest/axes/cartesian/time.html
时间序列 Axis
x: {
type: 'timeseries'
使数据点等距并相应地调整 x 轴以使条形显示均匀分布
Source: https://www.chartjs.org/docs/latest/axes/cartesian/timeseries.html https://www.chartjs.org/docs/latest/axes/cartesian/timeseries.html
Edit: following avoiding overlapping of x-Axis ticks in reply to comment:
到目前为止显示类型之间的差异time and timeseries