时间戳

首页 > 解决方案 > chart.js 时间序列跳过几天

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

问题描述

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

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

标签： javascriptchart.jschartjs-2.6.0

解决方案

这是此问题的有效解决方案，适用于 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 轴刻度重叠：没有重叠 x 轴刻度的时间序列

到目前为止显示类型time和timeseries

推荐阅读