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条)

报告相同问题？

悬赏问题

  • ¥20 删除和修改功能无法调用
  • ¥15 kafka topic 所有分副本数修改
  • ¥15 小程序中fit格式等运动数据文件怎样实现可视化？（包含心率信息））
  • ¥15 如何利用mmdetection3d中的get_flops.py文件计算fcos3d方法的flops？
  • ¥40 串口调试助手打开串口后,keil5的代码就停止了
  • ¥15 电脑最近经常蓝屏，求大家看看哪的问题
  • ¥60 高价有偿求java辅导。工程量较大，价格你定，联系确定辅导后将采纳你的答案。希望能给出完整详细代码，并能解释回答我关于代码的疑问疑问，代码要求如下，联系我会发文档
  • ¥50 C++五子棋AI程序编写
  • ¥30 求安卓设备利用一个typeC接口，同时实现向pc一边投屏一边上传数据的解决方案。
  • ¥15 SQL Server analysis services 服务安装失败