国产一级免费在线观看,蜜桃传媒文化有限公司免费版,日韩一区二区三区在线网页

国产凹凸在线-国产拗女一区二区三区-国产白白视-国产白领-国产白拍-国产白丝jk被疯狂输-国产白丝喷-国产白丝在线

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

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

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

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

相關(guān)鏈接：

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

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

在本例中，我們將用到這兩個(gè)size屬性。當(dāng)容器調(diào)整大小時(shí)，瀏覽器將發(fā)送一個(gè)新圖像的請(qǐng)求到服務(wù)器，與此同時(shí)我們會(huì)得到一個(gè)像素化的圖像，這樣做的目的是為了提升用戶體驗(yàn)。我們?cè)僭谂R時(shí)表的頂部添加一個(gè)“loading”的gif動(dòng)畫。

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

<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>

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

<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)返回就會(huì)被調(diào)用）：

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

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

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

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

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

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

標(biāo)簽：

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

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

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