FusionCharts各种图表的使用

顾陌发布时间：2014-12-02 分类：.NET 阅读：4673次 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>";
}

最终显示效果：