0

我试图让我的 High 图表从我从 Ajax (JSON) 获得的数据中工作，但我认为我一定遗漏了一些东西。我已经尝试循环遍历并将我需要的内容放入数组中，以便我可以将变量放入 xaxis 类别并将结果添加到系列中，但是当我运行它时出现脚本错误：

A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.

Script: http://code.highcharts.com/stock/highstock.js:51

这是我的代码

<script type="text/javascript">

            $("#GetReport").click(function () {

                var manufacturerId = 241;
                var countryId = 230;
                var startDate = '2013-01-09';
                var endDate = '2013-01-30';

                var theUrl = "/ProductStats/Parameters/" + manufacturerId + "/" + countryId + "/" + startDate + "/" + endDate;

                $.ajax({
                    type: "POST",
                    //contentType: "application/json; charset=utf-8",
                    url: theUrl,
                    data: { 'manufacturerId': manufacturerId, 'countryId': countryId, 'startDate': startDate, 'endDate': endDate },
                    dataType: "json",
                    success: function (data) {


                        //see this http://stackoverflow.com/questions/11472947/how-to-format-my-json-data-for-stack-column-chart-in-highcharts


                        var WidgetNameArray = [];

                        var impressionsArray = [];

                        var intsArray = [];

                        alert(data.length);

                        for (var i = 0; i < data.length; i++) {

                            var item1 = data[i];

                            var widgetCategories = item1.WidgetName;

                            //put into an array
                            WidgetNameArray.push(widgetCategories);

                            var imps = item1.Impressions;

                            impressionsArray.push(imps);

                            var ints = item1.Interactions;

                            intsArray.push(ints);

                        }



                        // Create the chart
                        $('#container').highcharts({
                            chart: {
                                type: 'column'
                            },
                            title: {
                                text: 'Inter Chart ' + startDate + ' to ' + endDate
                            },
                            xAxis: {
                                categories: [WidgetNameArray]
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: 'Impressions/Interactions'
                                },
                                stackLabels: {
                                    enabled: true,
                                    style: {
                                        fontWeight: 'bold',
                                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                                    }
                                }
                            },
                            legend: {
                                align: 'right',
                                x: -100,
                                verticalAlign: 'top',
                                y: 20,
                                floating: true,
                                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                                borderColor: '#CCC',
                                borderWidth: 1,
                                shadow: false
                            },
                            tooltip: {
                                formatter: function () {
                                    return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + '<br/>' +
                        'Total: ' + this.point.stackTotal;
                                }
                            },
                            plotOptions: {
                                column: {
                                    stacking: 'normal',
                                    dataLabels: {
                                        enabled: true,
                                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                                    }
                                }
                            },
                            series: [{
                                name: 'Impressions',
                                data: [impressionsArray]
                            }, {
                                name: 'Interactions',
                                data: [intsArray]
                            }]
                        });




                        var table = document.getElementById("usertable");
                        var tabledata = "";

                        tabledata += "<tr>";
                        tabledata += "<th>Widget Name</th>";
                        tabledata += "<th>Impressions</th>";
                        tabledata += "<th>Interactions</th>";
                        tabledata += "<th>CTR</th>";
                        tabledata += "</tr>";



                        for (var i = 0; i < data.length; i++) {

                            var item = data[i];

                            tabledata += "<tr>";
                            tabledata += "<td>" + item.WidgetName + "</td>";
                            tabledata += "<td>" + item.Impressions + "</td>";
                            tabledata += "<td>" + item.Interactions + "</td>";
                            tabledata += "<td>" + item.Ctr + "</td>";
                            tabledata += "</tr>";

                        }


                        table.innerHTML = tabledata;

                        $("th").css("background-color", "#3399FF");
                        $("tr:even").css("background-color", "#eeeeee");
                        $("tr:odd").css("background-color", "#ffffff");


                    }
                }
                 );


            });

        </script>

这是我想要实现的 JSfiddle：http: //jsfiddle.net/3hJYF/4/

所以我不确定到底是什么问题。

我得到的数组是

WigetsNameArray:

Dove/ThreeScroll,Dove/FourScroll,Dove/TwoByThree,Dove/OneByThree,OneByFour,OneByFive,Dove/ThreeByTwo,DoveBelliniFacebook/TwoByTwoStandard/UK,Dove-OneBySix,DoveYouTubeEmbed,Dove-OneBySix Phantom2,DoveYouTubeEmbeded,Dove One By Seven Bin 2,Dove three stage Bin 2 FaceBook,Dove One By Seven Bin 2 Facebook,Dove Two By Four UK

impressionsArray:

5568,5597,5670,4966,4612,5146,15403,12907,4008,105,146,40,0,0,0,0

intsArray:

64,76,78,29,46,50,864,198,52,4,2,0,0,0,0,0

任何帮助深表感谢！谢谢

4

1 回答 1

3

data:[impressionsArray]是错的，只是给data: impressionsArray，同样的data: [intsArray]，应该data: intsArray也是，categories: [WidgetNameArray]应该是categories: WidgetNameArray

于 2013-06-21T09:18:48.240 回答