Question

我正在尝试使用从Ajax（JSON）获取的数据来使用我的High图表，但我认为我必须遗漏一些东西。我已经尝试循环并将我需要的东西放入数组，以便我可以将变量放入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

非常感谢任何帮助！感谢

Answer 1

data:[impressionsArray] 错误，只需提供data: impressionsArray，data: [intsArray]也是如此，data: intsArray也是categories: [WidgetNameArray]，categories: WidgetNameArray }应为{{1}}

HighCharts使用JSON设置类别和系列

1 个答案: