UnitStepSize 用于 Chartjs 的定期时间间隔答案

【问题标题】：UnitStepSize for regular time interval with ChartjsUnitStepSize 用于 Chartjs 的定期时间间隔
【发布时间】：2017-12-31 04:03:05
【问题描述】：

我的图表 js 图表无法定期获得 15 分钟的时间间隔。这里是我的 xAxis 的设置：

xAxes: [{
             type: 'time',
             ticks: {
               maxRotation: 90,
               minRotation: 80
             },
             time: {
               format: 'HH:mm',
               tooltipFormat: 'HH:mm',
               unit: 'minute',
               unitStepSize: 15,
               displayFormats: {
                 'minute': 'HH:mm',
                 'hour': 'HH:mm'
               },
               min: 1502521200000,
               max: 1502553600000
             }
       }]

x 数据是时间戳： 1502521200000

顺便说一句，我希望我的数据框从 1502521200000 开始并在 1502553600000 结束，但第一个数据点没有标签：感谢您的帮助

JSFiddle：https://jsfiddle.net/tn7ksfb6/

【问题讨论】：

谢谢，做到了:)
删除最小值和最大值..或使用正确的值，或者如果您希望所有范围始终“填充”数据，则通过为“孔”添加（x，未定义）
@RC。谢谢RC。 “填充”有效，但间隔为 10 分钟而不是 15 分钟。知道如何强制它吗？

标签： javascript charts chart.js

【解决方案1】：

正如@RC 建议的那样，删除min 和max，然后使用stepSize 而不是unitStepSize 来获得实际的步长工作

let myBubbleData = [{},{},{},{},{},{},{},{},{},{},{},{"x":1502531100000,"y":0.5,"r":3},{"x":1502532000000,"y":0.5,"r":3},{},{},{"x":1502534700000,"y":0.5,"r":6},{"x":1502535600000,"y":0.5,"r":3},{"x":1502536500000,"y":0.5,"r":3},{},{"x":1502538300000,"y":0.5,"r":3},{},{"x":1502540100000,"y":0.5,"r":3},{},{},{"x":1502542800000,"y":0.5,"r":6},{},{},{},{"x":1502546400000,"y":0.5,"r":3},{},{},{},{},{},{},{},{}];

let ctx = document.getElementById('test');
let myBubbleChart = new Chart(ctx,{
        type: 'bubble',
        data: {
            animation: {
                duration: 10000
            },
            datasets: [{
                data: myBubbleData
            }]
        },
        options: {
            responsive: true,
            title:{
                display: true,
                text:'Chart.js Bubble Chart'
            },
            scales: {
                yAxes: [{
                    display: false,
                    position: 'left',
                    ticks: {
                        min: 0,
                        max: 1
                    },
                    gridLines : {
                        display : false
                    }
                }],
                xAxes: [{
                    type: 'time',
                    ticks: {
                        maxRotation: 90,
                        minRotation: 80
                    },
                    time: {
                        format: 'HH:mm',
                        tooltipFormat: 'HH:mm',
                        unit: 'minute',
                        stepSize: 15,
                        displayFormats: {
                            'minute': 'HH:mm',
                            'hour': 'HH:mm'
                        }
                    }
                }]
            }
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<body>
<div>
<canvas id="test"></canvas>
</div>
</body>

【讨论】：

unit: 'minute'，是我需要的。这样我就可以正确处理回调了。