Question

我正在使用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
            }]
        });

数组具有我在上面详述的值。但目前他们在一个系列中的小提琴示例和它下面的代码是我想要的结果所以我需要循环通过数组添加系列但我不知道如何做到这一点 - 我希望这是有道理的

非常感谢

Answer 1

您的示例：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;
}

Highcharts：如何循环遍历数组以添加系列

1 个答案: