Question

我正在尝试从PhP模块动态获取数据，将其作为JSON数据加载到javascript中，并使用此数据使用HighCharts生成饼图。当我使用一些静态数据但在解析JSON数据并将其作为输入提供给Highchart系列对象时不加载时，饼图正在生成。我确信这与输入到Highcharts时的数据格式有关，但我现在暂时无法解决这个问题:(所以我想你会联系到你们。我已经在这里附上了代码和样本php模块生成的json输出供您参考。

从PhP模块生成的示例JSON输入：[{“技能”：“html”，“计数”：“158”}，{“技能”：“css”，“计数”：“134”}]。需要解析此JSON输入并作为输入提供给我的HighCharts系列对象，以生成一个饼图，将“html”和“css”显示为饼图。

任何指导都将不胜感激。

感谢。

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

Answer 1

它适用于静态数据，因为count是一个int

["html",158]

它不适用于动态数据，因为它返回字符串计数

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

注意第二个代码行周围的双引号？您需要将字符串转换为php或javascript中的int，然后再将其传递给highcharts

另外一件事，如果你运行代码，那么highcharts会抱怨错误

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

如果您访问该链接，它基本上会对字符串说同样的事情。

代码还有另一个问题

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

正如你在这里看到的，我们有一个数组数组，当我们用字符串运行你的代码到int解析时，我们得到了

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

注意问题？我们有四个元素的数组。你需要做的是：

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

将两个元素的数组推送到结果变量，不要忘记count必须是int

Answer 2

试试这个，

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

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

2 个答案: