javascript - chart.js 时间刻度中的多个条形图不会全部显示

Question

我想使用 Chart.js 在一个时间尺度内比较 2 个数据集。所以我每天发送数据，但这是我的输出

如您所见，对于第一个和最后一个数据，我无法看到我的所有条形图。第一个将显示第二个数据集，最后一个将显示第一个数据集。

编辑

这是一个WORKING CODEPEN

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}]
    },{
      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         
});

Answer 1

我遇到了同样的问题，并通过向 scales.xAxes 添加 offset: true 选项来修复它

这是带有一个新选项的代码 https://codepen.io/anon/pen/yQqrVz?editors=0010 - 现在所有条都可见。

这是我的例子https://jsfiddle.net/0bnmc4eg/3/

我在这次对话中找到了解决方案 https://github.com/chartjs/Chart.js/pull/4545