Question

您好，我有一个PHP脚本，可以从数据库表中提取信息。

表结构是：

Delaytype(varchar)| Delayhours(int)

PHP脚本按延迟类型分组。

<!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))
 {   
   $pieData[] = array('value' =>$row['cnt'], 'color' =>'#878BB6 ');

    }
?>

<script>
 var pieData = <?php echo" ".json_encode($pieData).""; ?>;//problem



          // 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);     

}

?>

我正在尝试以下列格式输出JSON - 下面的示例仅适用于输入的值。它的Javascript用图表js创建一个饼图。

它希望JSON像

 [{value:?,color:"?"},{value:?,color:"?"}]

当我回复我的JSON时，我得到了

     [{"value":"?",color:"?"}],[{"value":?,color:"?"},{"value":?,color:"?"}]

第一组是第二组的副本，然后它有效吗？有没有更好的方法呢？通过上面的代码，我得到了图表的一部分。另一个问题是我必须为每一行获得不同的颜色？目前它是相同的颜色，因为我不知道如何获得不同的颜色，因为它不是我的数据库结构的一部分？

以下示例适用于创建不使用数据库的图表。理想情况下，我想要一些建议 1）如何从我的数据库中获取JSON以符合以下格式。 2）有没有一种方法可以在数据库表中存储颜色，我可以将不同的颜色值应用于下面的

var pieData =  [
        {
            value: 20 , // ideal :I want database data
            color:"#878BB6"//color that I have chosen  

       },
        {
            value : 40,
            color : "#4ACAB4"

        },
        {
            value : 10,
            color : "#FF8153"

        },
        {
            value : 30,
            color : "#FFEA88"

        }
    ];

当我做VAR_DUMP时我得到以下内容：

array(2) {[0]=>array(2) {["value"]=> string(2) "21"["color"]=>string    
(8) "#878BB6"}[1]=>array(2){["value"]=>string(2)"99"["color"]=>string       
(8)"#878BB6"}}

Answer 1

只需查看您的代码，Spagetti HTML，Javascript＆amp; PHP。

您不应该以这种方式混合它们，例如，您应该使用AJAX发出请求：

让服务器端（PHP）查询您的数据库。
在客户端解析响应（javascript）。

以下是一个例子：

<强> PHP

<?php
include "config.php";

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;");
    $pieData = array();

    while($row = mysqli_fetch_array($result)){   
       $pieData[] = array('value' =>$row['cnt'], 'color' =>'#878BB6 ');
    }
    mysqli_close($con);     
}
 echo json_encode($pieData); 

?>

<强> Javscript

window.onload = function() {
    var hr = new XMLHttpRequest();
    hr.open("GET", "get_pie_data.php", true);
    hr.setRequestHeader("Content-type", "application/json");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var pieData = JSON.parse(hr.responseText);
            // 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);

        }
    }
    hr.send(null);
}

如果您对jQuery感到满意，那么请查看ajax，它更容易使用。

Answer 2

你好得到了下面的图表工作最终代码。毕竟它似乎不是JSON问题。 JSON很好但是图表数据中我的数字的引号打破了图表。我添加了（int）如下。

延迟类型延迟时间“; $ pieData = array（）; while（$ row = mysqli_fetch_array（$ result）） { $ pieData [] = array（'value'=＆gt;（int）$ row ['cnt']，'color'=＆gt;'＃878BB6'）; } ？＆GT;

<script>
 var pieData = <?php echo json_encode($pieData) ?>;//



      // 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);     

}

?>

我还从json编码的echo中删除了引号（空格）。我在添加（int）之前就这样做了。它没有修复图表。但是我没有测试是否会在（int）到位的情况下打破图表。

我仍然有尝试在图表中获得不同颜色的问题。

感谢您的投入。这个问题与真正的问题有点不同。为此道歉。发布时我不知道这个

抱歉，只是看到有人在发布我的芒果时写了这个 - 谢谢你。

PHP JSON_encode输出不如预期

2 个答案: