2

我正在使用 Highcharts 并且需要循环通过一个数组来显示不同的系列，以便它显示如下所示：http: //jsfiddle.net/afnguyen/RUZb2/

这是代码：

$(function () {
        $('#container').highcharts({
            title: {
                text: 'Retaielr Clicks',
                x: -20 //center
            },
            subtitle: {
                text: 'Date',
                x: -20
            },
            xAxis: {
                categories: [32,33,24]
            },
            yAxis: {
                title: {
                    text: 'Clicks'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'Tesco',
                data: [43, 27, 47]
            }, {
                name: 'Asda',
                data: [48, 30, 45]
            }, {
                name: 'Boots',
                data: [62, 43, 59]
            }, {
                name: 'Superdrug',
                data: [63, 49, 64]
            }, {
                name: 'Ocado',
                data: [43, 34, 48]
            }, {
                name: 'Waitrose',
                data: [39, 24, 47]
            }]
        });
    });

数据来自 3 个数组：

weekNoArray[32,32,32,32,32,32,33,33,33,33,33,33,34,34,34,34,34,34] //this is used in the xAxis categories

retailerNameArray[Tesco,Asda,Boots,Superdrug,Ocado,Waitrose,Tesco,Asda,Boots,Superdrug,Ocado,Waitrose,Tesco,Asda,Boots,Superdrug,Ocado,Waitrose]  //this needs to be each series name (but only one of each)

clicksArray[43,48,62,63,43,39,27,30,43,49,34,24,47,45,59,64,48,47] //i need to loop through each of these putting them in the data

谁能以最好的方式帮助做到这一点？

所以我挣扎的是如何在系列中循环，即以下内容将不起作用：

for (var i = 0; i < data.length; i++)
                {
                    var leadrow = data[i];
                    series: [{
                        name: retailerNameArray[i],
                        data: clicksArray[i]
                    }]
                }

编辑

下面是我正在使用的实际代码

 $.ajax({
        type: "POST",
        url: theUrl,
        data: { 'manufacturer': manufacturer, 'country': country, 'category': category, 'startDate': startDate, 'endDate': endDate, 'chartType': chartType },
        dataType: "json",
        success: function (data) {
        var retailerNameArray = [];
        var clicksArray = [];
        var weekNoArray = [];
        var rowTotalArray = [];
        var weekArray = [];
        var columnTotalArray = [];
        var cumTotalArray = [];
        var weekCounterArray = [];
        var overallClickCountArray = [];
        var resellerShareArray = [];

        var retailerCount = 0;
        for (var i = 0; i < data.length; i++) {
            var cumLeadrow = data[i];
            //Only display on graph if not 0
            if (cumLeadrow.RetailerClickCount > 0) {
                // assign to array
                retailerCount = cumLeadrow.RetailerCount;
                var clicks = cumLeadrow.RetailerClickCount;
                clicksArray.push(clicks);
                var weekNum = cumLeadrow.WeekNo;
                weekNoArray.push(weekNum);
                var rowTotal = cumLeadrow.RowTotal;
                rowTotalArray.push(rowTotal);
                var date = cumLeadrow.WeeklyDate;
                weekArray.push(date);
                var columnTotal = cumLeadrow.ColumnTotal;
                var retailer = cumLeadrow.RetailerDescription;
                retailerNameArray.push(retailer);
                var resellerShare = cumLeadrow.ResellerShare;
                if (i < retailerCount) {
                    columnTotalArray.push(columnTotal);

                    resellerShareArray.push(resellerShare);
                }

                var cumTotal = cumLeadrow.CummulativeTotal;
                cumTotalArray.push(cumTotal);
                var weekCounter = cumLeadrow.WeeklyCounter;
                weekCounterArray.push(weekCounter);
                var overallClickCount = cumLeadrow.OverallClickCount;
                overallClickCountArray.push(overallClickCount);
            }
        }

        alert(clicksArray);
        alert(weekNoArray);
        alert(retailerNameArray);

        var lowerChart = chartType.toLowerCase();

        // Create the chart
        $('#chartContainer').highcharts({
            chart: {
                type: lowerChart
            },
            title: {
                text: manufacturer + '  Cumulative Leads in  ' + country + "/" + category + '<br/> from ' + startDate + ' to ' + endDate
            },
            xAxis: {
                categories: weekNoArray,
                labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Retailer Clicks'
                },
                stackLabels: {
                    enabled: false,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -50,
                verticalAlign: 'top',
                y: 0,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            credits: {
                enabled: false
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + '<br/>';
                }
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: retailerNameArray,
                data: clicksArray
            }]
        });

这些数组具有我在上面详述的值。但是目前它们是提琴手示例的一个系列，下面的代码是我想要的结果，所以我需要遍历数组来添加系列，但我不知道该怎么做——我希望这是有道理的

非常感谢

4

1 回答 1

7

给你的例子：http: //jsfiddle.net/RUZb2/1/

此代码将从您的数组生成系列：

var weekNoArray = [32, 32, 32, 32, 32, 32, 33, 33, 33, 33, 33, 33, 34, 34, 34, 34, 34, 34],
    retailerNameArray = ['a', 'b', 'c', 'd', 'e', 'f', 'a', 'b', 'c', 'd', 'e', 'f', 'a', 'b', 'c', 'd', 'e', 'f'],
    clicksArray = [43, 48, 62, 63, 43, 39, 27, 30, 43, 49, 34, 24, 47, 45, 59, 64, 48, 47],
    series = [];

series = generateData(weekNoArray, retailerNameArray, clicksArray);

function generateData(cats, names, points) {
    var ret = {},
        ps = [],
        series = [],
        len = cats.length;

    //concat to get points
    for (var i = 0; i < len; i++) {
        ps[i] = {
            x: cats[i],
            y: points[i],
            n: names[i]
        };
    }
    names = [];
    //generate series and split points
    for (i = 0; i < len; i++) {
        var p = ps[i],
            sIndex = $.inArray(p.n, names);

        if (sIndex < 0) {
            sIndex = names.push(p.n) - 1;
            series.push({
                name: p.n,
                data: []
            });
        }
        series[sIndex].data.push(p);
    }
    return series;
}
于 2013-09-12T15:46:05.080 回答