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);
    };
} ();
这样,一个运行时调整图表大小的功能就实现了。

 

你可能感兴趣的:(.net,chart,图表,7,FX,.NET图表)