快捷導(dǎo)航

.net+FusionChart實現(xiàn)動態(tài)顯示的柱狀圖和餅狀圖

更新時間：2022年07月05日 11:09:08 作者：AZRNG

這篇文章介紹了.net+FusionChart實現(xiàn)動態(tài)顯示柱狀圖和餅狀圖的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

html代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="divBarChart">
    </div>
    <div id="divPieChart">
    </div>
    <div id="divPieChart2">
    </div>
    <script type="text/javascript" src="FusionChart/FusionCharts.js"></script>
    <script type="text/javascript">
        function ConstructHttpString(myURL) {
            myURL += "?rnd=" + new Date().getTime();
            return encodeURIComponent(myURL.toString());
        }
        //畫圖(以指定 xml格式文件為數(shù)據(jù)源)
        function DrawChart(divId,flashFileName,width,height,xmlUrl) {
            var myChartId = new Date().getTime();
            var myChart = new FusionCharts("FusionChart/" + flashFileName, myChartId, width, height);
            //myChart.setDataURL("data.xml"); //獲取xml格式數(shù)據(jù)源
            myChart.setDataURL(ConstructHttpString(xmlUrl)); //獲取xml格式數(shù)據(jù)源
            myChart.set
            myChart.addParam("wmode", "Opaque");
            myChart.render(divId);
        }
        
        //畫圖 (以指定 xml格式字符串為數(shù)據(jù)源)
        function DrawChart2(divId, flashFileName, width, height) {
            var myChartId = new Date().getTime();
            var myChart = new FusionCharts("FusionChart/" + flashFileName, myChartId, width, height);
            myChart.setDataXML('<chart caption="逗你玩" numberPrefix="$"><set value="25" label="Item A" color="AFD8F8" /><set value="17" label="Item B" color="F6BD0F" /><set value="23" label="Item C" color="8BBA00" isSliced="1" /></chart>');
            myChart.addParam("wmode", "Opaque");
            myChart.render(divId);
        }
        //柱狀圖
        DrawChart("divBarChart", "StackedColumn2D.swf", "831", "396", "dataXml.xml");
        //餅狀圖
        DrawChart("divPieChart", "Pie2D.swf", "831", "396", "xml.aspx");
        //餅狀圖
        DrawChart2("divPieChart2", "Pie2D.swf", "500", "396");
    </script>
</body>
</html>

上面是，前端頁面上的使用，可以看出：其用法很簡單，對于繪制柱狀圖或是餅狀圖等，對于使用唯一的區(qū)別就是：指定不同的展示flash文件和相應(yīng)的xml格式內(nèi)容(具體每種chart圖表對應(yīng)的xml文件格式，請查看官網(wǎng)Demo)。其方法主要方法有：

setDataURL：設(shè)置數(shù)據(jù)源Url，以指定 xml格式文件為數(shù)據(jù)源
setDataXML：設(shè)置數(shù)據(jù)源xml內(nèi)容，以指定 xml格式字符串為數(shù)據(jù)源

(網(wǎng)上說有個setJSONData的方法，可以設(shè)置json對象作為數(shù)據(jù)源，但應(yīng)該是老版本或整合修改后的js文件，沒找到，所以直接設(shè)置json對象作為數(shù)據(jù)源貌似不行！)

using System;
 
namespace Web_Client.pieChart
{
    public partial class xml : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.ContentType = "text/xml; characterset=utf-8";
            Response.BinaryWrite(new byte[] { 0xEF, 0xBB, 0xBF });
            Response.Write("<chart caption=\"餅狀圖\" numberPrefix=\"$\"><set value=\"25\" label=\"項目 A\" color=\"AFD8F8\" /><set value=\"17\" label=\"Item B\" color=\"F6BD0F\" /><set value=\"23\" label=\"Item C\" color=\"8BBA00\" isSliced=\"1\" />   <set value=\"65\" label=\"Item D\" color=\"A66EDD\" /><set value=\"22\" label=\"Item E\" color=\"F984A1\" /></chart>");
            Response.End();
        }
    }
}

以上是在后臺代碼中輸出xml格式文件為數(shù)據(jù)源，需要注意的是：Response.ContentType = "text/xml; characterset=utf-8";Response.BinaryWrite(new byte[] { 0xEF, 0xBB, 0xBF });——這兩行代碼是不可缺少的，其作用是：指定輸出xml文件的編碼和解決中文亂碼問題！