顾陌 发布时间:2014-12-02 分类:.NET 阅读:4534次 1 条评论
项目中需要用饼状图直观的展示用户需要的数据。用到了FusionCharts框架,它的具体编写步骤是提供它需要的xml数据,并绑定。代码及效果如下:
前台HTML及JS代码:
<script type="text/javascript"> var showChart01 = function () { //debugger; var chartxml1 = document.getElementById('<%=hidXml1.ClientID%>').value; var chart1 = new FusionCharts("/JS/FusionCharts/Pie3D.swf", "ChartId", screen.width - 500, screen.height - 400); chart1.addParam("wmode", "Opaque"); chart1.setDataXML(chartxml1); chart1.render("pie1"); } $(function () { showChart01(); }); </script>
<div id="pie1" style="text-align:center; margin:0px auto;"></div>
其中隐藏域hidXml1的值就是FusionCharts需要的xml数据,可以以字符串的形式,也可以用xml文件的地址等方式。pie1代表html元素的id,就是FusionCharts图表所要显示的位置。
将Pie3D.swf改为Column2D.swf、Column3D.swf等可以直接转化为条形图的图表。
后台xml数据代码:
if (!IsPostBack) { hidXml1.Value = "<chart caption='月份合同分析' subCaption='' decimalPrecision='2' formatNumberScale='2' showPercentValues='1' pieSliceDepth='30' owBorde='1' showValues='1' bgColor='FFFFFF' startingAngle='90' showBorder='1' baseFontSize='12' xAxisName='' yAxisName='万元' chartLeftMargin='10' chartRightMargin='10' chartTopMargin='10' chartBottomMargin='10' plotBorderColor='cccccc' showShadow='0' use3DLighting='0' showPercentValues='1' labelSepChar=' ' forceDecimals='4' decimals='2' labelDistance='1' smartLineThickness='1' >" + "<set value=\"10\" label=\"项目 A\" color=\"AFD8F8\" />" + "<set value=\"10\" label=\"Item B\" color=\"F6BD0F\" />" + "<set value=\"10\" label=\"Item C\" color=\"8BBA00\" />" + "<set value=\"10\" label=\"Item D\" color=\"A66EDD\" />" + "<set value=\"60\" label=\"Item E\" color=\"F984A1\" />" + "</chart>"; }
最终显示效果:
发布于 2014-12-08 13:56:09 回复该评论
发表评论:
◎欢迎您的参与讨论。