首页 > 代码库 > 使用FusionCharts出柱状图和饼状图
使用FusionCharts出柱状图和饼状图
在最近的项目中,需要使用出图,能够查看柱状图,饼状图等效果,刚开始我们用JS写的效果,发现效果不理想,找了一个JS插件发现效果还是不理想,客户也不满意,客户希望要很炫的效果,最后我们使用了FusionCharts。
FusionCharts是一个Flash的图表组件,它可以用来制作数据动画图表,其中动画效果用的是Adobe Flash 8 (原Macromedia Flash的)制作的flash , FusionCharts可用于任何网页的脚本语言类似于HTML , .NET,ASP , JSP技术的, PHP , ColdFusion等,提供互动性和强大的图表。使用XML作为其数据接口, FusionCharts充分利用流体美丽的Flash创建紧凑,互动性和视觉逮捕图表。当然他的有点我就不说了,百科上说的很多...
为了很炫,我们就使用的是FusionCharts里面的MSColumn3D.swf和Pie3D.swf的3D效果,具体不说了,直接贴代码了,这样看着清楚。
(1)创建柱状图的关键代码
public void CreateChart(List<AJSLTJModel> list) { string strCategories; string strCategories2; strchartXML = "<graph formatNumber=‘0‘ formatNumberScale=‘0‘ >"; strchartXML2 = "<graph formatNumber=‘0‘ formatNumberScale=‘0‘ >"; strCategories = "<categories>"; strCategories2 = "<categories>"; string strDataCurr1 = "<dataset seriesName=‘登记数量‘ color=‘AFD8F8‘>"; string strDataPrev1 = "<dataset seriesName=‘登记面积‘ color=‘F6BD0F‘>"; for (int i = 0; i < list.Count; i++) { AJSLTJModel ajstjModel = list[i]; string catagry = ajstjModel.ResYear + "年" + ajstjModel.ResMonth + "月"; string resTJSL = ajstjModel.ResDJSL.ToString(); string resTJMJ = ajstjModel.ResDJMJ.ToString(); strCategories += "<category name=‘" + catagry + "‘ />"; strCategories2 += "<category name=‘" + catagry + "‘ />"; strDataCurr1 += "<set value=http://www.mamicode.com/‘" + resTJSL + "‘ />"; strDataPrev1 += "<set value=http://www.mamicode.com/‘" + resTJMJ + "‘ />"; } strCategories += "</categories>"; strCategories2 += "</categories>"; strDataCurr1 += "</dataset>"; strDataPrev1 += "</dataset>"; strchartXML += strCategories + strDataCurr1 + "</graph>"; strchartXML2 += strCategories2 + strDataPrev1 + "</graph>"; ClientScript.RegisterStartupScript(this.GetType(), "showDiv", " <script> updateChart(\"" + strchartXML + "\",\"" + strchartXML2 + "\") </script> "); }
(2)创建饼状图的关键代码
public void CreateChartPie(List<AJSLTJModel> list) { strchartXMLPie1 = "<chart palette=‘4‘ decimals=‘0‘ enableSmartLabels=‘1‘ enableRotation=‘0‘ bgColor=‘99CCFF,FFFFFF‘ bgAlpha=‘40,100‘ bgRatio=‘0,100‘ bgAngle=‘360‘ showBorder=‘1‘ startingAngle=‘70‘ >"; strchartXMLPie2 = "<chart palette=‘4‘ decimals=‘0‘ enableSmartLabels=‘1‘ enableRotation=‘0‘ bgColor=‘99CCFF,FFFFFF‘ bgAlpha=‘40,100‘ bgRatio=‘0,100‘ bgAngle=‘360‘ showBorder=‘1‘ startingAngle=‘70‘ >"; string strDataCurr1 = ""; string strDataCurr2 = ""; for (int i = 0; i < list.Count; i++) { AJSLTJModel ajstjModel = list[i]; string catagry = ajstjModel.ResYear + "年" + ajstjModel.ResMonth + "月"; string resTJSL = ajstjModel.ResDJSL.ToString(); string resTJMJ = ajstjModel.ResDJMJ.ToString(); strDataCurr1 += "<set label=‘"+catagry+"‘ value=http://www.mamicode.com/‘"+resTJSL+"‘ />"; strDataCurr2 += "<set label=‘" + catagry + "‘ value=http://www.mamicode.com/‘" + resTJMJ + "‘ />"; } strchartXMLPie1 += strDataCurr1 + "</chart>"; strchartXMLPie2 += strDataCurr2 + "</chart>"; ClientScript.RegisterStartupScript(this.GetType(), "showDiv", " <script> updatePie(\"" + strchartXMLPie1 + "\",\"" + strchartXMLPie2 + "\") </script> "); }
(3)前台JS代码:
function updateChart(strchartXML,strchartXML2) { var chart1div = document.getElementById("chart1div"); if (chart1div != null) { var chart1 = new FusionCharts("../FusionChart/MSColumn3D.swf", "chart1Id", screen.width - 400, screen.height - 500, "0", "0"); chart1.addParam("wmode", "Opaque"); chart1.setDataXML(strchartXML); chart1.render("chart1div"); } var chart2div = document.getElementById("chart2div"); if (chart2div != null) { var chart2 = new FusionCharts("../FusionChart/MSColumn3D.swf", "chart2Id", screen.width - 400, screen.height - 500, "0", "0"); chart2.addParam("wmode", "Opaque"); chart2.setDataXML(strchartXML2); chart2.render("chart2div"); } } function updatePie(strchartXMLPie1, strchartXMLPie2) { var pie1div = document.getElementById("pie1div"); if (pie1div != null) { var pie1 = new FusionCharts("../FusionChart/Pie3D.swf", "pie1Id", screen.width - 400, screen.height - 500, "0", "0"); pie1.addParam("wmode", "Opaque"); pie1.setDataXML(strchartXMLPie1); pie1.render("pie1div"); } var pie2div = document.getElementById("pie2div"); if (pie2div != null) { var pie2 = new FusionCharts("../FusionChart/Pie3D.swf", "pie2Id", screen.width - 400, screen.height - 500, "0", "0"); pie2.addParam("wmode", "Opaque"); pie2.setDataXML(strchartXMLPie2); pie2.render("pie2div"); } }
(4)还是看看效果图吧
OK,很炫吧,打开的时候如同雨后春笋,3D效果就是炫....使用完毕
使用FusionCharts出柱状图和饼状图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。