码迷,mamicode.com
首页 > 其他好文 > 详细

使用FusionCharts出柱状图和饼状图

时间:2014-09-01 13:52:13      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   使用   java   ar   

  在最近的项目中,需要使用出图,能够查看柱状图,饼状图等效果,刚开始我们用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=‘" + resTJSL + "‘ />";
                strDataPrev1 += "<set value=‘" + 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=‘"+resTJSL+"‘ />";
                strDataCurr2 += "<set label=‘" + catagry + "‘ value=‘" + 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)还是看看效果图吧


bubuko.com,布布扣
 

OK,很炫吧,打开的时候如同雨后春笋,3D效果就是炫....使用完毕

使用FusionCharts出柱状图和饼状图

标签:style   blog   http   color   os   io   使用   java   ar   

原文地址:http://www.cnblogs.com/henuyuxiang/p/3949016.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!