0

我是 JSON 和 High Charts 的新手。我需要显示带有高图表的动态线。我为此使用 JSON 格式。我真的很困惑我的代码有什么问题。我在 Firebug 中没有收到任何错误，但图表没有呈现。下面是我的 JSON。

{
"data": [
    {
        "AccountName": "test@test.com",
        "Campaign": [
            {
                "id": 1138,
                "name": "Samsung Corporate v2",
                "accountid": 106680966134773,
                "FBImpression": 0,
                "CLImpression": 78,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            },
            {
                "id": 1133,
                "name": "Samsung Corporate Fan Gate oCPM",
                "accountid": 106680966134773,
                "FBImpression": 0,
                "CLImpression": 90,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            },
            {
                "id": 647,
                "name": "Samsung Corporate Fan Gate",
                "accountid": 106680966134773,
                "FBImpression": 0,
                "CLImpression": 0,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            },
            {
                "id": 646,
                "name": "Samsung Corporate Timeline",
                "accountid": 106680966134773,
                "FBImpression": 0,
                "CLImpression": 0,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            },
            {
                "id": 1548,
                "name": "Sauza Tequila v2.0",
                "accountid": 108139269338750,
                "FBImpression": 0,
                "CLImpression": 0,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            },
            {
                "id": 953,
                "name": "Samsung Corporate Timeline O C P M",
                "accountid": 106680966134773,
                "FBImpression": 0,
                "CLImpression": 0,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            },
            {
                "id": 738,
                "name": "MSN EN FB",
                "accountid": 106388236165899,
                "FBImpression": 0,
                "CLImpression": 0,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            },
            {
                "id": 1511,
                "name": "Samsung Passions Program",
                "accountid": 106680966134773,
                "FBImpression": 2786134,
                "CLImpression": 2786134,
                "FBClick": 566,
                "CLClick": 566,
                "FBSpent": 679.77001953125,
                "CLSpent": 679.77001953125,
                "FBConnection": 396,
                "CLConnection": 358
            },
            {
                "id": 917,
                "name": "Samsung Passion App",
                "accountid": 106680966134773,
                "FBImpression": 0,
                "CLImpression": 0,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            },
            {
                "id": 1606,
                "name": "Samsung Corporate v2 oCPM",
                "accountid": 106680966134773,
                "FBImpression": 0,
                "CLImpression": 0,
                "FBClick": 0,
                "CLClick": 0,
                "FBSpent": 0,
                "CLSpent": 0,
                "FBConnection": 0,
                "CLConnection": 0
            }
        ]
    }
]
}

这是我的html文件。

<script src="jquery.min.js" type="text/javascript"></script>
<script src="highcharts.js"></script>
<div id="errq" style="height: 400px"></div>
<script>
    $(document).ready(function() {
        var options = {
            chart: {
                renderTo: 'errq',
                type: 'line'
            },
            title: {
                text: 'shannon.way'
            },
            tooltip: {
                formatter: function() {
                    return this.series.name + ':' + '<b> ' + this.y + '</b>';
                },
                style: {
                    fontSize: '10px'
                }

            },
            credits: {
                enabled: false
            },
            yAxis: {
                title: {
                    text: ''
                },

            },
            xAxis: {
                labels: {
                    enabled: false
                }
            },
            series: [{
                name: 'Budget Spent',

                data: []},
            {
                name: 'Impressions',
                data: []},
            {
                name: 'Clicks',
                data: []},
            {
                name: 'Likes',
                data: []}

                                    ]
        };
        $.getJSON('accounts.json', null, function(data) {
            var str = JSON.stringify(data);

    /* options.series[0].data = data[0].CLImp;    
                         options.series[1].data = data[0].CLClick;  
                 options.series[2].data =    data[0].CLSpent;  
                 options.series[3].data = data[0].CLLikes;  
                      chart = new Highcharts.Chart(options);*/



            var json_parsed = $.parseJSON(str);
            var CLimp = new Array();
            for (var u = 0; u < json_parsed.data.length; u++) {
                var user = json_parsed.data[u];
                for (i = 0; i < user.Campaign.length; i++) {
                    CLimp[i] = parseInt(user.Campaign[i].CLImpression);

                }

            }
            var imp = CLimp.join(",");
            alert(imp);
            options.series[0].data = imp;
            chart = new Highcharts.Chart(options);
        });
    });​
</script>

当我alert(imp);得到78,90,0,0,0,0,0,2786134,0,0但无法弄清楚为什么图表没有呈现时。请在这方面给我建议。

4

1 回答 1

1

Highcharts 不期望字符串格式的数据，而是数组格式的数据。您的问题是您将数组转换为字符串：

        var imp = CLimp.join(",");
        alert(imp);
        options.series[0].data = imp;

只需直接使用数组，它应该可以工作：

        options.series[0].data = CLimp;

jsFiddle的工作示例。

于 2012-11-02T01:06:45.627 回答