Chart FX 7实践：运行时调整图表大小

虽然Chart FX 7已经用了新版本，Chart FX 8，不过，刚出来没多久，用的人毕竟是少数，就向我一样，依旧是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);
    };
} ();

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

来源：oschina

链接：https://my.oschina.net/u/1254919/blog/158886

标签

chart

图表

.NET图表

.net