基于JSON数据在JavaScript中创建饼图的问题排查与解决

Hey there! Let's get that pie chart working properly. Your current code has a couple of key issues preventing it from running—let's break them down and fix them step by step:

Key Issues in Your Original Code #

• Undefined result variable: Your PHP fetches the JSON data but never passes it to the JavaScript result variable. The chart has no data to render at all!
• Mismatched data field name: Your JSON uses Count (uppercase "C") but your chart configuration references count (lowercase "c") for dataValue. The chart can't find the values it needs to plot because of this case mismatch.
• Unvalidated JSON handling: We should ensure the PHP-fetched JSON is properly converted into a valid JavaScript object to avoid parsing errors.

Corrected Full Code #

<!DOCTYPE html> 
<html> 
<head> 
    <title>Domain Count Pie Chart</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 
        // Fetch JSON data from the URL and validate it
        $jsn_data = file_get_contents("http://localhost:9080/Badges/reporting/badge_json.php");
        // Convert JSON string to a PHP array for safer handling
        $chart_data = json_decode($jsn_data, true);
    ?> 
    <div id="chart"></div> 
    <script type="text/javascript"> 
        // Pass the PHP-processed data to JavaScript as a valid object
        const chartData = <?php echo json_encode($chart_data); ?>;

        $("#chart").igPieChart({ 
            width: "435px", 
            height: "435px", 
            dataSource: chartData, 
            dataValue: "Count", // Matches the exact uppercase key in your JSON
            dataLabel: "Domain", 
            labelsPosition: "bestFit" 
        }); 
    </script> 
</body> 
</html>

What We Changed #

1. Connected PHP data to JavaScript: We used json_encode() to convert the PHP-parsed JSON into a valid JavaScript object (chartData), so the pie chart can access the dataset directly.
2. Fixed the data key mismatch: Updated dataValue: "count" to dataValue: "Count" to match the exact key name in your provided JSON data.
3. Added JSON validation: Used json_decode() in PHP to ensure the fetched data is valid JSON before passing it to JS—this helps catch invalid data issues early.

If you still run into problems, double-check that your badge_json.php endpoint returns valid JSON (you can test this by visiting the URL directly in your browser). Also, confirm there are no cross-origin issues if your frontend and backend are running on different ports or hosts.

内容的提问来源于stack exchange，提问作者Jayalakshmi