javascript - 带时间刻度的图表.js 宽条

Question

我对基于时间范围的条形图有疑问。当一段时间内没有数据时，条形图会变宽。

var element = document.querySelector('.line-chart');

var options = {
    legend: {
        position: 'bottom'
    },
    hover: {
        mode: 'point',
        intersect: false
    },
    tooltips: {
        mode: 'x',
        intersect: false,
        callbacks: {
            title: function (tooltip, data) {
                return;
            },
            label: function (tooltip, data) {
                return ;
            },
            footer: function (tooltip, data) {
                return;
            }
        }
    },
    scales: {
        xAxes: [{
            id: 'timescale',
            type: 'time',
            unit: 'day',
            unitStepSize: 1,
            time: {
                displayFormats: {
                    'millisecond': 'DD MMMM YYYY HH:mm',
                    'second': 'mm:ss',
                    'minute': 'HH:mm',
                    'hour': 'HH:mm',
                    'day': 'DD MMM',
                    'week': 'DD MMM',
                    'month': 'DD MMMM',
                    'quarter': '[Q]Q - YYYY',
                    'year': 'YYYY',
                }
            },
            display: true,
            position: 'bottom',
            scaleLabel: {
                display: true,
                labelString: "Heure",
            }
        }],
        yAxes: [{
            id: 'consumption',
            type: 'linear',
            position: 'left',
            ticks: {
                beginAtZero: true
            },
            scaleLabel: {
                display: true,
                labelString: "Consommation",
            }
        }]
    }
}

var graph = new Chart(element, {
  type : 'bar',
  data : {
    labels : [],
    datasets : [{
      label: 'datasets1',
      type: 'bar',
      backgroundColor: Chart.helpers.color('#0000FF').alpha(0.5).rgbString(),
      borderColor: '#0000FF',
      unite: null,
      yAxisID: 'consumption',
      data: [{x: '2017-10-26T22:00:00.000Z', y:73.16},{x: '2017-11-27T22:00:00.000Z', y:36.16}, {x: '2017-11-28T22:00:00.000Z', y:36.16}, {x: '2017-11-29T22:00:00.000Z', y:36.16}, {x: '2017-12-27T22:00:00.000Z', y:36.16}]
    },{
      label: 'datasets2',
      type: 'bar',
      backgroundColor: Chart.helpers.color('#FF0000').alpha(0.5).rgbString(),
      borderColor: '#FF0000',
      unite: null,
      yAxisID: 'consumption',
      data: [{x: '2017-10-26T22:00:00.000Z', y:87.16},{x: '2017-11-27T22:00:00.000Z', y:24.16}]
    }],
  },
  options : options         
});

.container {
  display: flex;
  height: 100%;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<div class="container">
  <canvas class="line-chart"></canvas>
</div>

Codepen

Answer 1

我也遇到了同样的问题。通过将缺失的日期添加到值为 0 的数据集中，我能够获得所需的显示。

虽然我认为当您丢失线性时间刻度的天数时条形宽度的当前行为是一个错误，但这是一个对我来说还不错的解决方法，因为我的数据不是很稀疏。