Question

我正在尝试创建一个动态Javascript图表，它将显示多行。

每条线应代表调查中的唯一用户，X轴=时间，y轴为0-100分。每个用户将在整个调查过程中回答多个问题，这就是为同一个用户提供多个数据点的原因。

我遇到的问题是我似乎无法找到如何为每个唯一用户动态创建新数据集。一切似乎都在提前定义数据集。

我的数据看起来像这样。 Sample MySQL Table

根据以下评论，我能够修改我的Json

{
"user1": [
    {
        "x": "2017-03-27 12:28:12",
        "y": "85"
    },
    {
        "x": "2017-03-27 12:28:14",
        "y": "41"
    },
    {
        "x": "2017-03-27 12:28:17",
        "y": "97"
    },
    {
        "x": "2017-03-27 12:28:20",
        "y": "99"
    },
    {
        "x": "2017-03-27 12:28:35",
        "y": "98"
    },
    {
        "x": "2017-03-27 12:28:40",
        "y": "83"
    },
    {
        "x": "2017-03-27 12:30:42",
        "y": "68"
    }
],
"user2": [
    {
        "x": "2017-03-27 12:28:19",
        "y": "0"
    },
    {
        "x": "2017-03-27 12:28:24",
        "y": "37"
    },
    {
        "x": "2017-03-27 12:29:46",
        "y": "0"
    },
    {
        "x": "2017-03-27 12:29:51",
        "y": "9"
    },
    {
        "x": "2017-03-27 12:29:53",
        "y": "28"
    },
    {
        "x": "2017-03-27 12:29:54",
        "y": "2"
    },
    {
        "x": "2017-03-27 12:29:56",
        "y": "0"
    },
    {
        "x": "2017-03-27 12:30:45",
        "y": "38"
    },
    {
        "x": "2017-03-27 12:35:23",
        "y": "37"
    }
],
"": [
    {
        "x": "2017-03-28 10:06:04",
        "y": "0"
    },
    {
        "x": "2017-03-28 10:06:07",
        "y": "97"
    },
    {
        "x": "2017-03-28 10:06:17",
        "y": "11"
    },
    {
        "x": "2017-03-28 10:06:38",
        "y": "100"
    },
    {
        "x": "2017-03-28 10:06:41",
        "y": "3"
    },
    {
        "x": "2017-03-28 10:06:45",
        "y": "54"
    },
    {
        "x": "2017-03-28 10:06:48",
        "y": "93"
    },
    {
        "x": "2017-03-28 10:06:52",
        "y": "0"
    },
    {
        "x": "2017-03-28 10:06:54",
        "y": "46"
    }
]

}

我正在使用的代码。这是我用来在刷新时生成单线图的HTML。我正在使用Canvas JS，但我愿意接受任何解决方案。

    <!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="canvasjs.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
 refreshTable();
 });
function refreshTable(){
            $.getJSON("graphdata.php", function (result) {

                var chart = new CanvasJS.Chart("chartContainer", {
                    data: [
                        {
            type: "spline",
                            dataPoints: result
                        }
                    ]
                });

                chart.render();
 setTimeout(refreshTable, 2000);
            });

}





    </script>
</head>
<body>

    <div id="chartContainer" style="width: 800px; height: 380px;"></div>
<a href="cleargraph.php"> Clear Data</a>

</body>
</html>

想要创建这样的东西，但每次都会改变行/用户的数量。

Goal

这是我的新Json脚本。我只是想弄清楚如何获得类型：“line”，dataPoints：部分到json feed。无论是在Json创建中还是在收到Json后使用javascript。

     <?php

//Include database configuration file
include('dbConfig.php');

header('Content-Type: application/json');


    $data_points = array();

    $result = mysqli_query($db, "SELECT * FROM survey_scores");

    while($row = mysqli_fetch_array($result))
    {        
        $point = array("userid" => $row['user'], "x" => $row['test'] , "y" => $row['score'] );

        array_push($data_points, $point);        
    }

foreach($data_points as $element) {
        $out[$element['userid']][] = ['x' => $element['x'], 'y' => $element['y']];
}


   echo json_encode($out, JSON_PRETTY_PRINT);
  //  echo json_encode($data_points, JSON_NUMERIC_CHECK);

mysqli_close($db);

?>

Answer 1

由于您需要multiSeries图表，因此需要将不同的dataSeries推送到数据，而不是将结果分配给dataPoints。为此，您需要处理结果（JSON）以将其更改为不同的dataSeries。要将结果分成不同dataSeries的不同dataPoints，您可以执行以下操作：

if (result[i].userid == "user1") {
    x = result[i].label.replace(/[- :]/g, ",").split(",");
    dataPoints[0].push({x: new Date(x[0], x[1], x[2], x[3], x[4], x[5]), y: result[i].y})
} else if(result[i].userid == "user2") {
    x = result[i].label.replace(/[- :]/g, ",").split(",");
    dataPoints[1].push({x: new Date(x[0], x[1], x[2], x[3], x[4], x[5]), y: result[i].y})
} else {
    x = result[i].label.replace(/[- :]/g, ",").split(",");
    dataPoints[2].push({x: new Date(x[0], x[1], x[2], x[3], x[4], x[5]), y: result[i].y})
}

为不同的dataSeries分离dataPoints后，您现在可以创建dataSeries并将其推送到数组。

for(var i = 0; i < dataPoints.length; i++) {
    if(dataPoints[i].length > 0) {
        myData.push({type: "line", dataPoints: dataPoints[i]})
    }
}

在分离不同的dataSeries之后，您可以简单地将此变量（myData）分配给canvasjs的数据

var chart = new CanvasJS("divId", {
    data: myData
})

动态Javascript多线图与动态数据集

1 个答案: