Question

我正在尝试创建一个气泡图，显示过去24小时的数据。我已经为 X轴使用了时间刻度。我遇到的问题是，当图表被绘制时，它假定午夜之前的时间为同一天并从那里开始图表并绘制应该在象限之外的第二天的点。

这些是我的标签

["15:46", "16:46", "17:46", "18:46", "19:46", "20:46", "21:46", "22:46", "23:46", "00:45", "01:45", "02:45", "03:45", "04:45", "05:45", "06:45", "07:45", "08:45", "09:45", "10:45", "11:45", "12:45", "13:45"];

此处 15:46 是从昨天起的时间， 00:45 是来自今天。所以当我从我的数据中绘制点时，它应该从 15:46 开始绘制数据，并在第二天继续直到 13:45 。但它没有做到。我甚至尝试过给予否定时间，但它也没有用。

这是代码的一部分。其余的都在JSFiddle

中

 var graph = document.getElementById('graph1');
    var myChart = new Chart(graph, {
        type: 'bubble',
        data: {
            labels: labels,
            datasets: [

                {
                    // pending
                    label: 'Pending',
                    data: pendingBubbles,
                    backgroundColor: 'rgba(255, 90, 94, 0.6)',
                    hoverBackgroundColor: 'rgba(255, 90, 94, 1)',
                    borderColor: 'rgba(255,99,132,1)',
                    fillColor: "rgba(220,220,220,0.0)",
                    strokeColor: "rgba(220,220,220,0)",
                    pointColor: "rgba(220,220,220,0)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    borderWidth: 1,
                    //fill: false,
                    multiTooltipTemplate: "<%=datasetLabel%> : <%= value %><%= Chart.mySymbols[window.data.labels.indexOf(label)] %>"
                }, {
                    // completed
                    label: 'Completed',
                    data: completedBubbles,
                    backgroundColor: 'rgba(102, 182, 57, 0.6)',
                    hoverBackgroundColor: 'rgba(102, 182, 57, 1)',
                    borderColor: 'rgba(102, 182, 57,1)',
                    fillColor: "rgba(102,182,57,0.0)",
                    strokeColor: "rgba(102,182,57,0)",
                    pointColor: "rgba(102,182,57,0)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(102,182,57,1)",
                    borderWidth: 1,
                    //fill: false,
                    multiTooltipTemplate: "<%=datasetLabel%> : <%= value %><%= Chart.CompletedTransactionID[1].TransactionID %>"
                }
            ]
        },
        options: {

            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,
            showTooltips: true,
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        format: "HH:mm",
                        unit: 'hour',
                        unitStepSize: 1,
                        displayFormats: {
                            'minute': 'HH:mm',
                            'hour': 'HH:mm'
                        },
                        min: labels[0],
                        max: labels[labels[length - 1]]
                    }
                }]
            }
        }
    });

这里有一个JSFiddle。如果可以修复，请告诉我。

Answer 1

您在尺度上为'max'配置添加了错误的值。将其更改为

max: labels[labels.length - 1]

Answer 2

除非您的数据是新的Date（）格式数组，否则Chartjs无法解释数据以创建间隔或设置最小值和最大值。我遇到过同样的问题。唯一的办法，我能够解决的是在时间之前添加新的Date（）。如果您没有日期和过去的24小时数据，请通过添加当前日期和昨天日期来准备数据阵列。

让x轴上的时间显示当前时间的最后24小时

2 个答案: