.NET图表控件Chart FX 7应用教程：运行时调整图表大小-控件新闻-慧都网

.NET图表控件Chart FX 7应用教程：运行时调整图表大小

原创|使用教程|编辑：郝浩|2013-04-19 13:44:19.000|阅读 569 次

概述：和其他.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@capbkgr.cn

文章转载自：慧都控件

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