Круговая диаграмма, созданная из JSON Data в Javascript

Jayalakshmi Sadasivan спросил: 28 апреля 2018 в 09:16 в: javascript

Я новичок в PHP и JavaScript, мне нужно создать круговую диаграмму с использованием данных JSON, которые будут получены из URL. Данные 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>

Но этот код не работает. скажите, пожалуйста, как это сделать?


2 ответа

War ответил: 28 апреля 2018 в 09:21

dataLabel: "Badge_SubDomain" не существует в вашем источнике данных.

Возможно, попробуйте что-то вроде ...

   $("#chart").igPieChart({
            width: "435px",
            height: "435px",
            dataSource: result, 
            dataValue: "count",
            dataLabel: "Domain",
            labelsPosition: "bestFit"
        });
   });
AWAiS SOOMrO ответил: 28 апреля 2018 в 02:38

Исправить:

  1. Свойство JSON Count - это строка , а не integer

  2. Код сломан, он должен быть исправлен.

  3. Результат переменной не является определяемый в любом месте тега <script>

  4. Фрагмент JavaScript находится внутри тега <?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);
?>