Question

我在使用我的图表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/

Answer 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>

UnitStepSize与Chartjs的常规时间间隔

1 个答案: