如何在PHP中划分系列为谷歌图表创建一个json表
mik*_*ik3 5 php charts json mysqli google-visualization
我必须使用数据库中的数据绘制许多曲线.数据库结构如下:
我想要的结果是这样的(在这种情况下只有2个系列和一个对数轴)
使用test(字符串)作为系列名称(在图例中)和直径并传递为X和Y值.我试过很多解决方案,但没有; 我想我明白我需要将结果拆分为测试(字符串),但我不知道如何.你能帮助我吗？
<?php
//connection
$connect = mysqli_connect("server","user","pw","DB");
//query
$result = mysqli_query($connect, "SELECT DISTINCT test, diameter, pass FROM
tablex;");
// json C
$rows = array();
$table = array();
$array['cols'][] = array('label' => 'test', 'type' => 'strimg');
$array['cols'][] = array('label' => 'diameter', 'type' => 'number');
$array['cols'][] = array('label' => 'pass', 'type' => 'number');
// json R
while($row = mysqli_fetch_array($result))
{
$provino = array ($row["test"]);
$sub_array = array('f' =>$row["test"]);
$diameter = array ($row["diameter"]);
$sub_array[] = array('v' => $row["diameter"]);
$pass = array ($row["pass"]);
$sub_array[] = array('v' => $row["pass"]);
$rows []= array('c' => $sub_array);
}
$array['rows'] = $rows;
$jsonTable = json_encode($array);
?>
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
var Options = {
title: 'CG',
legend: 'bottom',
width: 1000,
height: 1000
};
var chart = new
google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, Options);
}
</script>
<style>
</style>
</style>
</head>
<body>
<div class="page-wrapper">
<br />
<div id="line_chart" style="width: 100%; height: 500px"></div>
</div>
</body>
</html>
谷歌折线图的数据格式
要求 x 轴为数据表中的第一列。
每个附加列都被视为一个系列。
为了为每个测试（字符串）建立一个系列，
数据表需要采用以下格式。
diameter | AAAAAAAAA | BBBBBBBBB | CCCCCCCCC
-------- | --------- | --------- | ---------
20 | 12 | |
10 | 19 | |
7 | 72 | |
21 | | 15 |
12 | | 52 |
3 | | 65 |
19 | | | 44
11 | | | 22
5 | | | 36
这可能很难在您的查询/php 中构建，
特别是如果有更多的测试系列（字符串）。
因此，您可以单独保留 php，
并使用 google 的DataView类
将数据转换为您需要的格式。
// create data view
var view = new google.visualization.DataView(data);
该类DataView允许您使用方法 --> 提供自己的列setColumns(array)
传递您需要的列的数组。
我们可以传递列索引来使用现有的列。
例如1对于'diameter'专栏。
// init view columns, use diameter as x-axis
var viewColumns = [1];
或者我们可以传递一个对象{}来用作计算列。
该对象应该具有正常的列属性，
例如label& type。
它还可以有一个calc函数，针对数据表中的每一行运行。
它接收数据表和行索引作为参数。
该函数应返回该列的值。
// build view column for each test series
data.getDistinctValues(0).forEach(function (test, index) {
// add y-axis column for test
viewColumns.push({
calc: function (dt, row) {
// return value for test (string)
if (dt.getValue(row, 0) === test) {
return dt.getValue(row, 2);
}
// return null if row does not equal test (string)
return null;
},
label: test,
type: 'number'
});
});
为了为每个唯一测试（字符串）构建一列，
请使用数据表方法 -->getDistinctValues(columnIndex)
这将返回给定列的唯一值的数组。
请参阅以下工作片段...
diameter | AAAAAAAAA | BBBBBBBBB | CCCCCCCCC
-------- | --------- | --------- | ---------
20 | 12 | |
10 | 19 | |
7 | 72 | |
21 | | 15 |
12 | | 52 |
3 | | 65 |
19 | | | 44
11 | | | 22
5 | | | 36
// create data view
var view = new google.visualization.DataView(data);
编辑
json 中的数字用引号 ( "v":"100") 括起来，
这很好，但是数据视图认为您正在尝试返回字符串而不是数字。
一个简单的解决方法是将字符串解析为计算列中的数字......
viewColumns.push({
calc: function (dt, row) {
// return value for test (string)
if (dt.getValue(row, 0) === test) {
return parseFloat(dt.getValue(row, 2)); // <-- use parseFloat here
}
// return null if row does not equal test (string)
return null;
},
label: test,
type: 'number'
});
请参阅以下更新的片段...
// init view columns, use diameter as x-axis
var viewColumns = [1];
// build view column for each test series
data.getDistinctValues(0).forEach(function (test, index) {
// add y-axis column for test
viewColumns.push({
calc: function (dt, row) {
// return value for test (string)
if (dt.getValue(row, 0) === test) {
return dt.getValue(row, 2);
}
// return null if row does not equal test (string)
return null;
},
label: test,
type: 'number'
});
});
| 归档时间： |
|
| 查看次数： |
81 次 |
| 最近记录： |