从Javascript中的JSON数据创建饼图

问题描述：

我是PHP和JavaScript的新手，我需要使用从URL获取的JSON数据创建一个饼图. JSON数据为:

I am new in PHP and JavaScript, i need to create a pie chart using JSON data which will be get from the URL. The JSON data is :

[
  {"Domain":"Artificial Intelligence","Count":"46"}, 
  {"Domain":"Data Architecture","Count":"21"}, 
  {"Domain":"Data Science","Count":"50"}, 
]

代码:

<!DOCTYPE html>   
<html>
<head>
<title></title>
<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/structure/infragistics.css" rel="stylesheet" />

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"> 
</script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://cdn- na.infragistics.com/igniteui/2018.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.dv.js"></script>

</head>
<body>
<?php
 # Reading JSN Data from URLS
 $jsn_data =    
 file_get_contents("http://localhost:9080/Badges/reporting/badge_json.php");
  <div id="chart"></div>
  <script type="text/javascript">

   $("#chart").igPieChart({
            width: "435px",
            height: "435px",
            dataSource: result, 
            dataValue: "count",
            dataLabel: "Domain",
            labelsPosition: "bestFit"
        });

      });
    <script>

 </body>
 s</html>

但是此代码不起作用.请告诉我这是怎么做的?

But this code does not work. please tell me how do this ?

答

修复以下问题:

JSON属性 Count 是一个字符串，而不是整数

代码已损坏，需要修复

结果变量未在<script>标记

JavaScript代码段位于<?php/>标记内，将其移至外部

The JavaScript snippet is inside <?php/> tag, move it outside

这是固定代码:

here's the fixed code:

index.php:

<!DOCTYPE html>   
<html>
    <head>
        <title></title>
        <link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></script>
        <link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/structure/infragistics.css" rel="stylesheet"></script>

        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
        <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.core.js"></script>
        <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.dv.js"></script>
    </head>
    <body>
        <div id="chart"></div>
        <script type="text/javascript">
            $.ajax({type:"GET", url: "badge_json.php", success: function(data) {
                $("#chart").igPieChart({
                    width: "435px",
                    height: "435px",
                    dataSource: data, 
                    dataValue: "Count",
                    dataLabel: "Domain",
                    labelsPosition: "bestFit"
                });
            }});
        </script>
    </body>
</html>

和 badge_json.php:

<?php
    header('Content-type: application/json');

    // your data goes here
    $data = array(
        ['Domain' => 'Artificial Intelligence', 'Count' => 46],
        ['Domain' => 'Data Architecture', 'Count' => 21],
        ['Domain' => 'Data Science', 'Count' => 50]
    );

    echo json_encode($data);
?>

从Javascript中的JSON数据创建饼图

相关推荐