彩票走势图

如何在图表加载过程中显示进度条

原创|使用教程|编辑:郝浩|2013-09-11 09:22:58.000|阅读 602 次

概述:在制作的复杂图表,是否会遇到加载很费时间的情况呢?如果有,那么,你需要让你的用户知道图表正在加载中,他们需要做的只是在等待一会。解决这个问题,我们常用的方法就是在加载的时候显示进度条。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

在制作的复杂图表,是否会遇到加载很费时间的情况呢?如果有,那么,你需要让你的用户知道图表正在加载中,他们需要做的只是在等待一会。解决这个问题,我们常用的方法就是在加载的时候显示进度条。今天,我们就在图表来看一看如何在图表加载的时候显示进度条的方法。那么,我们制作一个基本的图表,开始今天的学习吧。

注意:以下示例可用于Javascript/HTML5 Stock Chart

如何显示进度条(Javascript/HTML5 Stock Chart可用)

上图比较简单,没有大家期望的那样美观实用,不过作为一个例子,已经完全够用了。这是一个基于日期的图标记录。其中有100个区域图,每一个区域有500个数据点,如果你也想自己试一试,下面有提供代码:

var chart;
var chartData = [];

// generate some random data, quite different range
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 500);

for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);

var dataPoint = {
date: newDate
};

// generate values for 50 graphs
for (var c = 0; c < 100; c++) {
dataPoint['value'+c] = Math.round(Math.random() * 40) - 20;
}

chartData.push(dataPoint);
}
}

// creat chart
AmCharts.ready(function() {
// generate some data
generateChartData();

// SERIAL CHART 
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "//www.amcharts.com/lib/images/";
chart.dataProvider = chartData;
chart.categoryField = "date";


// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelsEnabled = false;
categoryAxis.ignoreAxisWidth = true;
categoryAxis.axisAlpha = 0;

// value 
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
valueAxis.dashLength = 1;
chart.addValueAxis(valueAxis);

// GRAPH
for (var c = 0; c < 100; c++) {
var graph = new AmCharts.AmGraph();
graph.valueField = "value"+c;
graph.bullet = "round";
graph.bulletBorderColor = "#FFFFFF";
graph.bulletBorderThickness = 2;
graph.lineThickness = 2;
graph.lineAlpha = 0.5;
graph.fillAlphas = 0.5;
graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
chart.addGraph(graph);
}

// WRITE
chart.write("chartdiv");
});

在Google Chrome中,普通电脑渲染该图表大约5秒,然后我们写一段HTML代码。我们将把图表容器"包装"(chartdiv) 下,放入一些父容器中。我们也可以建立一些同样大小的新容器,代码如下:

style="width: 400px;
height: 300px;
position: relative;">
<div id="chartcurtain"
style="width: 400px;
height: 300px;
position: absolute;
top: 0;
left: 0;
z-index: 100;
 text-align: center;
line-height: 300px;
font-size: 20px;">
Loading chart...
</div>
<div id="chartdiv"
style="width: 400px;
height: 300px;
z-index: 50;"></div>
</div>

代替图表加载进度条中的内容,你可以在HTML中更改。比如加载进度条图片,小猫打盹的图片或者其他任何你喜欢的东西。

然后我们来看看重新加载页面的效果:

加载页面显示进度条(Javascript/HTML5 Stock Chart可用)

一切都按照我们期望的进行着,我们再看看加载图表的效果(图表加载中,进度条出现了):

图表加载过程显示进度条(Javascript/HTML5 Stock Chart可用)

最后,我们需要在图表加载完成之后,移除进度条。在"rendered"事件中有我们需要的所有图表类型可以帮助我们完美完成这一步。
代码:

chart.addListener("rendered", function (event) {
document.getElementById("chartcurtain").style.display = "none";
});
If you have jQuery, you can make the loading text to gently fade out:

chart.addListener("rendered", function (event) {
$("#chartcurtain").fadeOut(1000);
});

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP