如何将 for 循环集成到 Fusioncharts

How to intergrate a for loop to Fusion Charts

我想在我的 FusionChart 脚本中添加一个 for 循环,这样我就可以通过循环输入值。但到目前为止我做不到。请帮忙。这是代码。我该怎么做才能使这个循环工作?

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'column3d',
        renderAt: 'chartContainer',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Monthly revenue for last year",
                "subCaption": "Harry's SuperMart",
                "xAxisName": "Month",
                "yAxisName": "Revenues (In USD)",
            },
            "data": [
                //for (var i = 0; i < ist.length; i++) {// this is where i want to add the loop

                {
                    "label": ist[0].MyProperty_Test_Customer_Id,
                    "value": parseFloat(ist[0].MyProperty_Test_Chargers)
                },
                {
                    "label": ist[1].MyProperty_Test_Customer_Id,
                    "value": parseFloat(ist[1].MyProperty_Test_Chargers)
                },
                {
                    "label": ist[2].MyProperty_Test_Customer_Id,
                    "value": parseFloat(ist[2].MyProperty_Test_Chargers)
                }
                //}

            ]
        }
    });
    revenueChart.render();
});

OK,所以 data 属性需要是一个数组。如果它在 so-called IIFE 内并且 IFFE return 是一个数组,则可以使用 for 循环实现此目的(请注意,您会将以下内容放入图表配置中):

"data": (function() {
    var data = [];

    for (var i = 0; i < ist.length; i++) {
        data.push({
            "label": ist[i].MyProperty_Test_Customer_Id,
            "value": parseFloat(ist[i].MyProperty_Test_Chargers)                
        })
    }

    return data;
})()

更好的是,使用上面的 for 循环 var revenueChart = new FusionCharts({...:

创建您需要的数组
var chartData = [];

for (var i = 0; i < ist.length; i++) {
    chartData.push({
        "label": ist[i].MyProperty_Test_Customer_Id,
        "value": parseFloat(ist[i].MyProperty_Test_Chargers)                
    })
}

var revenueChart = new FusionCharts({
    ...
    data: chartData
    ...
FusionCharts.ready(function () {
    var data = [];
    //alert(x.length);
    for (var i = 0; i < x.length; i++) {
        data.push({
            "label": x[i].HR_BG,
            "value": x[i].b                
        })
    }
    var ageGroupChart = new FusionCharts({
        type: 'pie3d',
        renderAt: 'chart-pie',
        width: '600',
        height: '500',
        dataFormat: 'json',
        dataSource:         
        {   
            "chart": {
                "caption": "YTR Production Hours",
                "subCaption": "",
                "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
                "bgColor": "#ffffff",
                "showBorder": "0",
                "use3DLighting": "0",
                "showShadow": "0",
                "enableSmartLabels": "0",
                "startingAngle": "0",
                "showPercentValues": "0",
                "showPercentInTooltip": "0",
                "decimals": "",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "toolTipColor": "#ffffff",
                "toolTipBorderThickness": "0",
                "toolTipBgColor": "#000000",
                "toolTipBgAlpha": "80",
                "toolTipBorderRadius": "2",
                "toolTipPadding": "5",
                "showHoverEffect":"1",
                "showLegend": "1",
                "legendBgColor": "#ffffff",
                "legendBorderAlpha": '0',
                "legendShadow": '0',
                "legendItemFontSize": '10',
                "legendItemFontColor": '#666666'
            },
            "data": data
        }
    }).render();
});