Chart FX 7實踐：運行時調整圖表大小

時間 2019-11-15

標籤 chart 實踐運行時調整圖表大小简体版

原文原文鏈接

雖然Chart FX 7已經用了新版本，Chart FX 8，不過，剛出來沒多久，用的人畢竟是少數，就向我同樣，依舊是Chart FX 7的忠實用戶，今天正好用它作圖表，很巧合的是也遇到了要調整圖表的問題，乾脆就直接按着之前看到的教程，生搬硬套了，不過最後仍是的本身改下。 html

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。