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

这样，一个运行时调整图表大小的功能就实现了。