2

私はハイチャートを使用しており、配列をループしてさまざまなシリーズを表示する必要があるため、ここに表示されているように表示されます: 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
            }]
        });

配列には、上で詳しく説明した値があります。しかし、現在、それらは1つのシリーズのフィドラーの例であり、その下のコードは私が望む結果であるため、配列をループしてシリーズを追加する必要がありますが、これを行う方法がわかりません-それが理にかなっていることを願っています

どうもありがとう

4

1 に答える 1