Как связать цикл for с диаграммами Fusion

Question

Я хочу добавить цикл for к сценарию FusionChart, чтобы я мог вводить значения через цикл. но до сих пор я не мог этого сделать. пожалуйста помоги. это код. что я могу сделать, чтобы этот цикл работал?

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(); 
}); 

Answer 1

OK, поэтому атрибут data должен быть массивом. Вы можете добиться этого с для цикла, если он находится внутри so-called IIFE и имеющего IFFE возвращает массив (обратите внимание, что вы должны поместить следующий внутри конфигурации диаграммы):

"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; 
})() 

еще лучше, создать массив, необходимо с помощью петли для выше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 
    ... 

Answer 2

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(); 
});