javascript - Chart.js 时间序列跳过几天

Question

我有一个非常简单的条形图，其中每个数据点由日期(天)和数字组成。也许唯一的特点是并非每个日期都被涵盖(即有些日子没有数据点)。

绘制图表时，仅显示那些具有与其关联的数据点的日期。所有其他日期都被简单地省略。因此 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'
                    },
                }]
            }
        }
    });

Answer 1

这是此问题的有效解决方案，适用于新版本的 Chart.js v3.x

Chart.js v3.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>

时间笛卡尔轴

x: {
     type: 'time'

按照您的要求使 x 轴“线性”，仍然显示没有数据的天数

来源:https://www.chartjs.org/docs/latest/axes/cartesian/time.html

时间序列轴

x: {
     type: 'timeseries'

使数据点等距并相应地调整 x 轴以使条形显示均匀分布

来源:https://www.chartjs.org/docs/latest/axes/cartesian/timeseries.html

编辑:在回复评论时避免x轴刻度线重叠:

到目前为止，我们已经展示了 time 和 timeseries 类型之间的区别