我正在尝试创建一个动态 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>
希望创建类似的东西，但线路/用户的数量每次都会改变。
这是我的新 Json 脚本。我只是不知道如何将 type: "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);
?>
最佳答案
由于您需要多系列图表，因此您需要将不同的数据系列推送到数据，而不是将结果分配给数据点。为此，您需要处理结果(JSON)以便将其更改为不同的数据系列。 要将结果分成不同数据系列的不同数据点，您可以执行以下操作:
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})
}
一旦您为不同的数据系列分离了数据点，您现在就可以创建数据系列并将其推送到数组。
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 - 具有动态数据集的动态 Javascript 多线图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43030653/