Chartjs X轴标签将不会显示

时间:2018-11-21 18:37:21

标签: javascript time chart.js

ChartJs中的时间文档非常模糊,并且几乎没有可用的示例,因此我正在努力获取用于处理特定时间记录的温度数据的时间序列。我可以将正确的时间格式显示在工具提示中,但不会显示在X轴上。

图形代码:

<script>
            var ctx = document.getElementById('myChart');
            var data = {
                labels: [],
                datasets: [{
                    label: "Temperature Graph",
                    fill: false,
                    borderColor: '#3cba9f',
                    data: []
                }]
            }
            const options = {
                type: 'line',
                data: data,
                options: {
                    fill: false,
                    responsive: true,
                    scales: {
                        xAxes: [{
                            type: 'time',
                            time: {
                                unit: 'day',
                                stepSize: 1,
                                displayFormats: {
                                    day: 'MMM D'
                                }

                            },
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: "Date",
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                            },
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: "Temperature",
                            }
                        }]
                    }
                }
            }
        var chart = new Chart(ctx, options)
        </script>

数据收集代码:

window.onload = function load() {
    getData();
}

var prevData = [];
var prevLabels = [];

function getData() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', encodeURI('http://localhostlocalhost/getTemp'));
    xhr.onload = function() {
        if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            console.log(data);

            var label = data.timestamp * 1000;

            prevData.push(data.temperature);
            prevLabels.push(label);

            chart.data.datasets[0].data = prevData;
            chart.data.labels = prevLabels;
            chart.update();
        }
        else {
            alert(xhr.status);
        }
    };
    xhr.send();

    setTimeout(getData, 10000);
}

xhr响应示例:

{temperature: 17, humidity: 38, location: "location", timestamp: 1542824305}

数据被绘制到图形上,并且所有工作都按预期进行,时间只是未出现在X轴上

0 个答案:

没有答案