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，我能够获得所需的显示。

虽然我认为当你缺少具有线性时标的天数时，条宽的当前行为是一个错误，但这是一个对我来说不太糟糕的解决方法，因为我的数据不是很稀疏。

chart.js带有时标的宽条

1 个答案: