chart.js 时间序列跳过几天答案

【问题标题】：chart.js time series skips dayschart.js 时间序列跳过几天
【发布时间】：2021-09-02 01:20:37
【问题描述】：

我有一个非常简单的条形图，其中每个数据点都包含一个日期（天）和一个数字。也许唯一的特点是没有涵盖每个日期（即有些日子没有数据点）。

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

【问题讨论】：

标签： javascript chart.js chartjs-2.6.0

【解决方案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 类型之间的区别

【讨论】：

嗨，您知道一种方法可以防止 X 轴刻度在 type:timeseries 中重叠，就像您的示例中发生的那样？
@Andyba 你的评论非常好 - 谢谢。我刚刚相应地编辑了我的代码供您查看和尝试，添加了 ticks: { minRotation: 85, maxRotation: 90} 以解决 x 轴刻度的重叠问题。再次感谢您的宝贵意见?

【解决方案2】：

我曾经遇到过类似的问题，对我有用的解决方案是首先实例化一个用 0 填充的数组（我的数组保存了五个工作日的数据，所以我创建了大小为 5 的数组，用 0 填充。然后在如果特定日期的数据存在，则数组被覆盖。否则它的值为 0)。

我想如果您传递的数据大小已知，这可能对您有用，因此您可以预先创建它并用 0 填充。

请记住，这可能不是最好的解决方案

【讨论】：