Question

我想用chart.js显示基于时间的折线图。数据通过websocket作为JSON发送：

{"sid":"eg.room06.temperatures.temp_1|avg|48h|now|100","series":[[1493198415233,21.4],[1493199364487,22.49],[1493201144363,21.97],[1493202824105,22.17],[1493204564473,22.38],[1493206324305,23.22],[1493208065142,23.39],[1493209786437,23.29],[1493211467193,23.05],[1493213248115,22.96],[1493214948390,23.08],[1493216828460,23.56],[1493268170194,19.03],[1493268589754,20.64],[1493270209957,20.4],[1493271949853,20.63],[1493273729827,20.92],[1493275649936,21.33],[1493277149966,21.57],[1493279129695,21.72],[1493280629731,22.23],[1493282310040,22.83],[1493284229704,22.82],[1493285930008,22.96],[1493287629860,22.7],[1493289330698,22.77],[1493290970948,23.15],[1493292690815,23.34],[1493294530805,23.53],[1493296151043,23.73],[1493298111710,23.74],[1493299651839,23.91],[1493301471857,24.15],[1493303152125,24.16],[1493304932038,24.03],[1493306652867,23.94],[1493356934754,20.26],[1493358474848,20.55],[1493360075050,21.08],[1493361834946,21.6],[1493363614864,21.99],[1493365434873,22.31],[1493367055112,22.75],[1493368855114,23.0],[1493370754724,23.08],[1493371055130,23.125],[1493371215233,23.125]],"cmd":"series"}

首先，JSON.parse用于获取所需的数据。在循环内，x值和y值分离。

var obj = JSON.parse(evt.data);
var timeIntX = [];
var valueY = [];
for (var i=0; i < obj.series.length; i++) {
    var valPair = obj.series[i];
    timeIntX.push(valPair[0]);
    valueY.push(valPair[1]);
}

timeIntX（纪元格式）：

1493199182012,1493199364487,1493201144363,1493202824105,1493204564473,1493206324305,1493208065142,1493209786437,1493211467193,1493213248115,1493214948390,1493216828460,1493268170194,1493268589754,1493270209957,1493271949853,1493273729827,1493275649936,1493277149966,1493279129695,1493280629731,1493282310040,1493284229704,1493285930008,1493287629860,1493289330698,1493290970948,1493292690815,1493294530805,1493296151043,1493298111710,1493299651839,1493301471857,1493303152125,1493304932038,1493306652867,1493356934754,1493358474848,1493360075050,1493361834946,1493363614864,1493365434873,1493367055112,1493368855114,1493370754724,1493371854699,1493371982012

VALUE年：

21.66,22.49,21.97,22.17,22.38,23.22,23.39,23.29,23.05,22.96,23.08,23.56,19.03,20.64,20.4,20.63,20.92,21.33,21.57,21.72,22.23,22.83,22.82,22.96,22.7,22.77,23.15,23.34,23.53,23.73,23.74,23.91,24.15,24.16,24.03,23.94,20.26,20.55,21.08,21.6,21.99,22.31,22.75,23,23.14,23.25,23.25

现在这些数组用作图表的X和Y数据。

var ctx = document.getElementById("myChart");

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: timeIntX,
        datasets: [
        {
            label: "Temperatur Zimmer 1006",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: valueY,
            spanGaps: true,
        }]
    }
});

作为脚本源我包括Chart.js，moment.js和jquery.js。 html正文中存在以下代码：

<canvas id="myChart" width="300" height="100"></canvas>

显示图表，但由于时间间隔不同，数据未正确缩放。我知道有时间刻度选项（see Documentation）但经过多次尝试后我仍然不知道如何正确使用它。

请询问您是否需要其他信息。如果你能帮助我，那将是很棒的。

提前感谢您的回答！

Answer 1

我现在发现了如何解决我的问题。主要问题是阵列的构建。您可以在下面看到我的新代码。原始数据保持不变。

var obj = JSON.parse(evt.data);
var plotData = [];
for (var i=0; i < obj.series.length; i++) {
    plotData.push({'x': obj.series[i][0], 'y': obj.series[i][1]});
}

以下代码显示了图表的初始化。在文档中，您可以在Scatter Line Charts下找到数据格式。

var chartData = {
    datasets: [{
        borderColor: 'orange',
        label: 'time chart',
        data: plotData,
        lineTension: 0.1,
    }]
};

var ctx = document.getElementById("myChart").getContext("2d");

window.myLineChart = new Chart(ctx, {
    type: 'line',
    data: chartData,
    options: {
        title: { 
            display: true,
            text: "series1",
            fontSize: 30
        },
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    tooltipFormat: 'h:mm:ss a'
                }
            }]
        }
    },
});

此设置适用于我。不要忘记HTML代码中的标记以及对jquery.js，moment.js和chart.js的引用。

我希望这个答案可以节省一些时间。

如何从具有不一致时间间隔和chart.js的数据点（数组）获取图表？

1 个答案: