如何将 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();
});
我想在我的 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();
});