Question

我对如何设置折线图有一个静态表示，如下所示：

var timeFormat = 'YYYY-MM-DDTHH:mm:ss';

    var config = {
        type:    'line',
        data:    {
            datasets: [
                {
                    label: "5833307",
                    data: [
					{
                        x: "2019-05-07 11:28:16.406795+03", y: 108
                    }, 
					{
                        x: "2019-05-07 11:28:36.406795+03", y: 108
                    },
					{
                        x: "2019-05-07 11:30:16.406795+03", y: 109
                    }],
                    fill: false,
                    borderColor: 'red'
                },
                {
                    label: "2656007",
                    data:  [{
                        x: "2019-05-0715:28:16.406795+03", y: 120
                    }, {
                        x: "2019-05-0717:28:16.406795+03", y: 119
                    }, {
                        x: "2019-05-0722:28:16.406795+03", y: 116
                    }],
                    fill:  false,
                    borderColor: 'blue'
                }
            ]
        },
        options: {
		legend: {
            display: true,
            
        },
            
            title:      {
                display: true,
                text:    "RSRQ"
            },
            scales:     {
                xAxes: [{
                    type:       "time",
                    time:       {
                        format: timeFormat,
                        tooltipFormat: 'lll'
                    },
                    scaleLabel: {
                        display:     true,
                        labelString: 'Date'
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display:     true,
                        labelString: 'value'
                    }
                }]
            }
        }
    };

    window.onload = function () {
        
        new Chart(document.getElementById("canvas"), config);
    };

<!doctype html>
<html>

<head>
    <title>Line Chart</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
    <style>
        
    </style>
</head>

<body>
<div style="width:100%;">
    <canvas id="canvas"></canvas>
</div>

上面的目的是了解和使用动态数据创建图表时的外观。

对于动态图表，我的流程正常，即从后端提取数据并尝试将其传递到图表中

以下是从后端返回的JSON数据：

[
    {
        cell_id: 5833307,
        datetime: ["2019-05-07 11:28:16.406795+03", "2019-05-07 11:28:38.764628+03", "2019-05-07 12:18:38.21369+03", "2019-05-07 12:33:47.889552+03", "2019-05-08 08:45:51.154047+03"],
        rsrq: ["108", "108", "108", "108", "109"]
     },
     {
        cell_id: 2656007,
        datetime: ["2019-07-23 15:29:16.572813+03", "2019-07-23 15:29:16.71938+03", "2019-07-23 15:29:16.781606+03", "2019-07-23 15:29:50.375931+03", "2019-07-23 15:30:01.902013+03"],
        rsrq: ["120", "119", "116", "134", "114"]
     }
 ]

根据上面的数据， cell_id 将形成标签，日期时间将形成x轴，而 rsrq 则是折线图。

这就是我在做什么：

var cellID = [];
var dateTime = [];
var rsrq = [];

jsonResponse.forEach(data => {
     cellID.push(data.cell_id)
     dateTime.push(data.datetime)
     rsrq.push(data.rsrq)
})

var config = {
      type: 'line',
      data: {
               datasets: [
               {
                    label: cellID,
                    data: 
                        {
                           x: dateTime, y: rsrq
                        },

                    fill: false,

                }
                ]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: "RSRQ"
                },
                scales: {
                    xAxes: [{
                        type: "time",
                        time: {
                            format: timeFormat,
                            tooltipFormat: 'lll'
                        },
                        scaleLabel: {
                            display:     true,
                            labelString: 'Date'
                        }
                    }],
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        }
                    }]
                }
            }
        };

        new Chart(document.getElementById("site-signal"), config);

所以我从后端获取JSON响应，循环遍历以获取数据。问题是正确访问 datetime 和 rsrq 的值，因为它们是数组，所以我还不太清楚如何处理它们以获取所需的数据。这是因为传递到Chart datasets属性的数据是一个数组。这是一个console.log，它将在将数据推送到它们之后为dateTime和rsrq数组变量而定义：

因此，好像需要在我的datasets内部进行循环。我将如何在轴上显示此数据？

ChartJs如何正确遍历数据集中的数组

0 个答案: