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

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

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

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

Answer 2

这是针对此问题的有效解决方案，适用于新版本的 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: 'time', // `time`  vs `timeseries` later in images
        time: {
          unit: 'day',
        }
      }
    }
  }
});

<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

希望这有助于显示类型 time 和 timeseries 之间的区别

chart.js时间序列跳过了几天

2 个答案: