0

PhP モジュールからデータを動的にフェッチし、それを JSON データとして JavaScript にロードし、このデータを使用して HighCharts を使用して円グラフを生成しようとしています。いくつかの静的データを使用している場合、円グラフは適切に生成されますが、JSON データを解析し、それを Highchart シリーズ オブジェクトへの入力としてフィードしている場合は読み込まれません。これは、ハイチャートへの入力中のデータのフォーマットに関係していると確信していますが、今のところそれを理解することはできません:(だから、あなたたちに連絡するだけだと思います。ここにコードとサンプルを添付しましたphp モジュールによって生成された json 出力を参考にしてください。

PhP モジュールから生成されたサンプル JSON 入力: [{"skill":"html","count":"158"},{"skill":"css","count":"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>

4

2 に答える 2

3

カウントはintであるため、静的データで機能します

["html",158]

また、文字列数を返すため、動的データでは機能しません

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

2番目のコード行の前後に二重引用符が付いていることに注意してください。文字列をhighchartsに渡す前に、phpまたはjavascriptのintに文字列をキャストする必要があります

そして別のことは、コードを実行すると、highchartsはエラーで文句を言うはずです

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

リンクにアクセスすると、基本的に文字列について同じことが言えます。

コードに別の問題があります

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

ここでわかるように、配列の配列があり、文字列を使用してコードをint解析で実行すると、次のようになります。

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

問題に気づきましたか？4つの要素の配列があります。あなたがする必要があるのは：

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

2つの要素の配列を結果変数にプッシュし、カウントはintでなければならないことを忘れないでください

于 2012-09-14T09:59:13.767 に答える
2

これを試して、

result.push([entry.skill, parseInt(entry.count)]);
于 2012-09-14T08:54:02.393 に答える