从 JavaScript 中的 JSON 数据创建饼图答案

【问题标题】：Pie chart creating from JSON Data in Javascript从 JavaScript 中的 JSON 数据创建饼图
【发布时间】：2018-05-22 10:56:24
【问题描述】：

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

[
  {"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>

但是这段代码不起作用。请告诉我这是怎么做的？

【问题讨论】：

您遇到什么错误？你在 $jsn_data 中得到了什么？尝试使用 urlencode - php.net/manual/en/function.file-get-contents.php 包装您的网址
请比“不起作用”更具体。您是否在 JavaScript 控制台中遇到任何错误？您是否检查了生成的页面以确保您的 php 正确？一切都很好，但图表没有显示？
我需要使用来自 URL 的 JSON 数据创建一个 pi 图表..我尝试了很多次..但没有得到任何结果...图表不显示。

标签： javascript php json infragistics

【解决方案1】：

dataLabel：您的数据源中不存在“Badge_SubDomain”。

也许可以试试...

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

【讨论】：

【解决方案2】：

修复这些：

JSON 属性 Count 是 字符串，而不是整数
代码坏了，需要修复
变量result未在<script>标签中的任何地方定义
JavaScript sn-p 在<?php/> 标签内，移到外面

这是固定代码：

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

【讨论】：