dpdt79577 2012-09-14 07:53
浏览 58
已采纳

解析JSON数据时出现高亮度数据问题

I am trying to dynamically fetch the data from a PhP module, load it as JSON data into javascript and use this data to generate a Pie chart using HighCharts. The Pie chart is generating properly when I am using some static data but not loading when I am parsing JSON data and feeding that as input to the Highchart series object. I am sure this is something to do with the formatting of data while inputting to Highcharts but I am not able to figure that out for sometime now :( So thought would just reach out to you guys . I have attached the code here and the sample json output generated by the php module for your reference.

Sample JSON input generated from PhP module : [{"skill":"html","count":"158"},{"skill":"css","count":"134"}]. Need to parse this JSON input and feed as input to my HighCharts series object to generate a pie-chart showing "html" and "css" as pie-slices.

Any guidance would be appreciated.

Thanks.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Top Skills Analytics</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script src="highcharts.js"></script>
</head>

<body>
    <table>
        <tr>
            <td colspan="2" align="center"><u><b><font size="4">Top Skills Analysis</font></b></u>

            </td>
        </tr>
        <tr>
            <td>
                <div id="container" style="height: 500px; width: 500px; margin-bottom: 1em;"></div>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        // Creates the HighChart using the dynamically generated data from PhP module
        function loadCharts() {
            // Parses the JSON data and returns an array of an array
            var result = [];
            // json from php is like : [{"skill":"html","count":"158"},{"skill":"css","count":"134"}]
            $.getJSON('test.php', function (json) {
                $.each(json, function (i, entry) {
                    result.push(entry.skill, entry.count);
                });
            });
            //result = [["html",158],["css",134]];  --> this works

            var options1 = {
                "series": [{
                    "name": "Jobs",
                    "type": "pie",
                    "sliced": true,
                    "data": result, // works when populated with static value like [["html",158],["css",134]]
                    "pointWidth": 15,
                    "color": "#C6D9E7",
                    "borderColor": "#8BB6D9",
                    "shadow": true,
                }],
                "title": {
                    "text": "Top Skills Analytics"
                },
                "legend": {
                    "layout": "vertical",
                    "style": {
                        "left": "auto",
                        "bottom": "auto",
                        "right": "auto",
                        "top": "auto"
                    }
                },
                "chart": {
                    "renderTo": "container"
                },
                "credits": {
                    "enabled": false
                }

            };

            var chart1 = new Highcharts.Chart(options1);
        }

        // Load the charts when the webpage loads for the first time
        $(document).ready(function () {
            loadCharts();
        });
    </script>
</body>

  • 写回答

2条回答 默认 最新

  • doujiu8479 2012-09-14 09:59
    关注

    It works with static data because the count is an int 

    ["html",158]

    And it doesn't work with dynamic data because it returns a string count

    {"skill":"html","count":"158"}

    Notice the double quotes around the second code line? You need to either cast your string to an int in php or in javascript before passing it to highcharts

    And another thing, if you run the code highcharts should complain with an error

    Uncaught Highcharts error #14: www.highcharts.com/errors/14

    If you visit the link it basically says the same thing about strings.

    There is another thing wrong with the code

    [["html",158],["css",134]]

    As you can see here we have an array of arrays and when we run your code with string to int parsing we get

    ["html", 158, "css", 134]

    Notice the problem? We have an array of four elements. What you need to do is:

    result.push([entry.skill, entry.count]);

    Push an array of two elements to the result variable and don't forget that count must be an int

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 使用ue5插件narrative时如何切换关卡也保存叙事任务记录
  • ¥20 软件测试决策法疑问求解答
  • ¥15 win11 23H2删除推荐的项目，支持注册表等
  • ¥15 matlab 用yalmip搭建模型，cplex求解，线性化处理的方法
  • ¥15 qt6.6.3 基于百度云的语音识别 不会改
  • ¥15 关于#目标检测#的问题：大概就是类似后台自动检测某下架商品的库存，在他监测到该商品上架并且可以购买的瞬间点击立即购买下单
  • ¥15 神经网络怎么把隐含层变量融合到损失函数中？
  • ¥15 lingo18勾选global solver求解使用的算法
  • ¥15 全部备份安卓app数据包括密码，可以复制到另一手机上运行
  • ¥20 测距传感器数据手册i2c