国产人妻绿帽黑人,多毛老熟女,东方成人

.NET圖表控件Chart FX 7應用教程：運行時調整圖表大小

原創|使用教程|編輯：郝浩|2013-04-19 13:44:19.000|閱讀 633 次

概述：和其他.NET圖表一樣，Chart FX 7圖表可以將容器大小設置為百分比的形式。但是當容器運行時需要重新調整大小時，圖表圖像會受到損害。要解決這個問題，我們可以用圖表的回調功能創建一個新的圖像以適應容器新的寬度和高度。

相關鏈接：

和其他.NET圖表一樣，Chart FX 7圖表可以將容器大小設置為百分比的形式。但是當容器需要重新調整大小時，圖表圖像會受到損害。要解決這個問題，我們可以用圖表的回調功能創建一個新的圖像以適應容器新的寬度和高度。

Chart FX 7的 Chart object 有兩種不同的size屬性，一個在Chart類中，另一個在ImageSettings類中。Chart object 的Width 和 Height屬性是type Unit，我們可以用這些屬性將容器設置為百分比的形式。ImageSettings的Width 和 Height屬性都是整數型，它們代表了圖表的真實大小。

在本例中，我們將用到這兩個size屬性。當容器調整大小時，瀏覽器將發送一個新圖像的請求到服務器，與此同時我們會得到一個像素化的圖像，這樣做的目的是為了提升用戶體驗。我們再在臨時表的頂部添加一個“loading”的gif動畫。

首先，讓我們看一下標記上的圖表，將圖表100%填充容器（用ImageSettings-TagAttributes添加一個樣式），讓圖像可以進行大小調整（為了避免實體動畫將default設置為false）和回調的處理。用TagAttributes添加一個圖像標簽樣式，以覆蓋圖表的樣式。所以我們需要確保能準確的移除它的邊框和位置。示例代碼：

<chartfx7:Chart ID="Chart1" runat="server" 
ImageSettings-TagAttributes="style="width: 100%; height: 100%;left: 0px;  top: 0px;" border=0" 
OnUserCallback="Chart1_UserCallback" ImageSettings-Sizeable="True">
    <Series>
        <chartfx7:SeriesAttributes />
        <chartfx7:SeriesAttributes />
        <chartfx7:SeriesAttributes />
    </Series> 
</chartfx7:Chart>

但是我們還沒有以像素來設置圖表大小，服務器無法判斷圖表的大小，所以服務器會創建一個默認大小的圖表。所以在頁面計算了容器大小之后我們必須將尺寸信息發送給服務器。新的圖表將以回調的方式創建出來，而且不用刷新整個頁面。用OnLoad事件進行加載：

<body onload="return body_Load()">

還有 body_Load() JavaScript函數，chartDiv是圖表容器：

function body_Load() 
{
    
    var divRect = document.getElementById('chartDiv').getBoundingClientRect();
    var divMargin = document.getElementById('chartDiv').style.margin.replace('px', '');

    var chartWidth = divRect.right - divRect.left - (2 * divMargin);
    var chartHeight = divRect.bottom - divRect.top - (2 * divMargin);
    var chartSize = [chartWidth, chartHeight];
    
    SFX_SendUserCallback('Chart1', chartSize, false);  
    SFX_onCallbackReadyDelegate = SFX_UpdateControls;
}

使用SFX_onCallbackReadyDelegate函數（一旦回調返回就會被調用）：

function SFX_UpdateControls(id,callbackReturn)
{
    SFX_onCallbackReadyDelegate = null;
    SFX_processing = false;
}

那么一個使用百分比計數的容器就建好了，接下來要做的是如何去調整圖表大小，下面要用到另外一個Body事件OnResize：

<body onload="return body_Load()" onresize="return body_Resize()">

但重復加載OnLoad事件會導致不斷的回調，服務器的負載會過大，解決方法是添加一個timer，當重新調整大小時開始計時，每1000毫秒才發送一次請求，當然也可以根據自己的需要靈活調整這個時間，具體的代碼如下：

var body_Resize = function() {
    var delay = 1000;
    var timeOut;

    return function() {

        if (timeOut) {
            clearTimeout(timeOut);
        }

        timeOut = setTimeout(function() {
            var divRect = document.getElementById('chartDiv').getBoundingClientRect();
            var divMargin = document.getElementById('chartDiv').style.margin.replace('px', '');

            var chartWidth = divRect.right - divRect.left - (2 * divMargin);
            var chartHeight = divRect.bottom - divRect.top - (2 * divMargin);
            var chartSize = [chartWidth, chartHeight];

            SFX_SendUserCallback('Chart1', chartSize, false);
            SFX_onCallbackReadyDelegate = SFX_UpdateControls;
        }, delay);
    };
} ();

這樣，一個運行時調整圖表大小的功能就實現了。

標簽：

本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn

文章轉載自：慧都控件

上一篇：Spread.Net使用教程：將數據保存到Excel文件下一篇：.NET混淆器Dotfuscator使用教程：控制流