【发布时间】：2015-03-22 00:53:17
【问题描述】：
我一直在尝试这样做一段时间。我正在对数据库运行查询并尝试将结果数据放入 chartjs 饼图。
我的表如下：
Delaytype| Delayhours
延迟类型具有确切数量的类别。
我获取此数据的 PHP 如下并且有效：
<?php
include "config.php" //database etc
If (mysqli_connect_errno($con))
{
echo 'failed';
}
else
{
$result = mysqli_($con, "SELECT Dealaytype, COUNT(1) as cnt FROM delays
GROUP BY Delaytype; ");
while($row = mysqli_fetch_array($result))
{
echo $row['delaytype']; //type of delay / works
echo $row['cnt']; // hours for that type of delay./ works
}
所有输出都有效。
我一直在将上述内容回显到 ID 为 myTable 的表格中。
我可以使用 Javascript 通过行和单元格以及输出值访问此表 .我似乎无法将值放入 pieData 变量中。表格在单元格和行的方式上总是相同的，所以每次都可以工作。
chart.js 脚本如下：
<canvas id='buy'></canvas>
var pieData = [
{
value : my hours from php for delaytype 1 or my value from javascript,
from mytable echoed by PHP.
color : "some color"
},
{
value : my hours from php for delaytype 2,
color : "some color"
}
];
var pieOptions = {
segmentShowStroke : false,
animateScale : true
};
var countries = document.getElementById("buy").getContext("2d");
new Chart(countries).Pie(pieData, pieOptions);
只有当我尝试合并我自己的数据时，该图表才能使用其中的示例数据。
previous to this I tried outputting the JSON with PHP trying to get this into the pieData . IS THIS POSSIBLE WITH
USING json_encode ? I looked at another question in relation to this but could not get this to work
对此的任何帮助将不胜感激。
hello Sean heres my current code cut from ide:
<!doctype html>
<?php
?>
<head>
<script src="chartjs/Chart.js-master/Chart.js"></script>
<script src="chartjs/Chart.js-master/Chart.min.js"></script>
<script src="chartjs/Chart.js-master/package.json"></script>
</head>
<body>
<?php
include "config.php";
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to DataBase: " . mysqli_connect_error();
}
else
{
$result = mysqli_query($con, "SELECT Delaytype, COUNT(1) as cnt FROM
delays GROUP BY Delaytype; ");
echo "<table id='mytable'><th>Delay Type</th><th>Delay Hours</th>";
$pieData = array();
while($row = mysqli_fetch_array($result))
{
// $point = $row['Delaytype'];
$pieData[] = array('value' =>$row['cnt'], 'color' =>'#878BB6 ');
echo "<tr><td>".$row['Delaytype']. "</td><td>" .$row['cnt']."</td></tr> ";
// $chart_data = array();
// $chart_data[0]["value"] =
//echo "".$row['Delaytype'].",";
//echo '"'.$row['Delaytype'].'",';
// $point = array($row['Delaytype'], $row['cnt']);
//array_push($data_points,$point);
}
// echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
?>
<div id="myballs"></div>
<button onclick="myFunction()">try this</button>
<canvas id="buy" width="600" height="400"></canvas>
<!-- line chart canvas element-->
<script>
var y = document.getElementById('mytable').rows[1].cells
[1].innerHTML;
function myFunction(){
var x = document.getElementById('myballs');
var y = document.getElementById('mytable').rows[1].cells
[1].innerHTML;
var p = document.getElementById('mytable').rows[2].cells
[1].innerHTML;
//var c = y + p;
x.innerHTML = (y * 1) + (p * 1);
}
</script>
var pieData = <?php echo" ".json_encode($pieData).""; ?>;
// [
// {
// value: 20 ,
// color:"#878BB6"
//},
// {
// value : 40,
// color : "#4ACAB4"
// },
//{
// value : 10,
//color : "#FF8153"
// },
//{
// value : 30,
//color : "#FFEA88"
//}
// ];
// pie chart options
var pieOptions = {
segmentShowStroke : false,
animateScale : true
};
// get pie chart canvas
var countries= document.getElementById("buy").getContext("2d");
// draw pie chart
new Chart(countries).Pie(pieData, pieOptions);
</script>
</body>
</html>
<?php
mysqli_close($con);
javascript 表格的内容是我获得价值等。通过这种设置，我只获得图表的一部分，即使我的值加起来超过 100，这是图表正确呈现所必需的。
我已经摆脱了重复的 JSON。
当我回显我的 JSON 时，我现在有
[{"value":"21","Color":"#878BB6"},{"value":"99","Color":"#878BB6"}],
这似乎是正确的。语音标记会破坏我的图表吗？
似乎值数字周围的语音标记打破了图表。
so "value": "21" //21 不需要在语音标记中并且有效
【问题讨论】：
标签： javascript php jquery json chart.js