使用Chart.js,我想在一个时间范围内比较2个数据集。所以我每天发送数据,但这是我的输出
javascript - chart.js时间范围内的多个条形图不会显示全部-LMLPHP
如您所见,对于第一个和最后一个数据,我无法看到我的所有图表。第一个将显示第二个数据集,最后一个将显示第一个数据集。
编辑
这是一个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
});

最佳答案

我遇到了同样的问题,并通过在offset: true中添加scales.xAxes选项来解决此问题

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

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

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

关于javascript - chart.js时间范围内的多个条形图不会显示全部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47795221/

10-09 20:25
查看更多