亚洲欧美在线精品,在线不卡一区电影,日本免费黄色网

.NET圖表控件Chart FX 7應(yīng)用教程：運行時調(diào)整圖表大小

原創(chuàng)|使用教程|編輯：郝浩|2013-04-19 13:44:19.000|閱讀 643 次

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

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關(guān)鏈接：

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

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

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

首先，讓我們看一下標記上的圖表，將圖表100%填充容器（用ImageSettings-TagAttributes添加一個樣式），讓圖像可以進行大小調(diào)整（為了避免實體動畫將default設(shè)置為false）和回調(diào)的處理。用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>

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

<body onload="return body_Load()">

還有 body_Load() JavaScript函數(shù)，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函數(shù)（一旦回調(diào)返回就會被調(diào)用）：

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

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

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

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

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);
    };
} ();

這樣，一個運行時調(diào)整圖表大小的功能就實現(xiàn)了。

標簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn

文章轉(zhuǎn)載自：慧都控件

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