HighChart学习-更新数据dataSeries与重绘-创新互联
一:HighChart介绍
超过十多年行业经验,技术领先,服务至上的经营模式,全靠网络和口碑获得客户,为自己降低成本,也就是为客户降低成本。到目前业务范围包括了:成都做网站、成都网站设计,成都网站推广,成都网站优化,整体网络托管,成都微信小程序,微信开发,成都app开发,同时也可以让客户的网站和网络营销和我们一样获得订单和生意!基于JQuery的纯JavaScript的图标库,支持各种图表显示,同时还支持Mootools
与Prototype详细版本支持在这里:
JQuery | 1.3.2 - 1.9.x. 2.0.x for modern browsers |
Mootools | 1.2.5 - 1.4.5 |
Prototype | 1.7 |
支持目前市场几乎所有的主要浏览器IE, Chrome, FF,Safari, Opera等。其图形渲染完
全是是基于SVG与VML方式,其中VML方式主要是兼容IE浏览器,在IE9+及其它浏览
器上渲染技术都是基于SVG方式。下载与安装指导文档
->http://docs.highcharts.com/#home安装好以后,建一个基本static web 项目,如图
所示:
二:HighChart基本的Bar Chart演示
打开链接->http://docs.highcharts.com/#your-first-chart
拷贝your first chart中第二步中的全部script脚本到mydemo.html中的
之间。导入JQuery与highchart库文件支持。代码如下:
在tomcat中部署demo1之后访问如下URL:http://localhost:8080/demo1/mydemo.html
在浏览器中看到如下Bar Chart:
三:清除HighChart中的数据集(remove data series from high chart object)
代码修改:
1. 把type:’bar’ 改成type: ’column’ 其作用是让bar垂直显示
2. 向script尾部追加如下代码,自动清除所有series然后刷新
setTimeout(function(){
var series=chart.series;
while(series.length > 0) {
series[0].remove(false);
}
chart.redraw();
},2000);
四:向HighChart中添加data series(add new data series into high chart object)
向script的尾部追加如下代码,实现添加data series并刷新bar chart
setTimeout(function(){
chart.addSeries({
id:1,
name:"gloomyfish",
data:[1,2,3]
},false);
chart.addSeries({
id:2,
name:"wang-er-ma",
data:[5,2,1]
},false);
chart.addSeries({
id:3,
name:"zhang-san",
data:[4,8,6]
},false);
chart.redraw();
},2000);
addSeries方法中第二个参数false表示不重绘plot,等所有series添加完成调用redraw
方法重绘。
五:在chart中清除high chart官方链接(remove high chart official hyperlink in chart)
仔细观察在Bar Chart的右下角有个highchart的官方链接,当然希望去掉,只要在chart
声明中将credits声明设置改为false即可。代码如下:
credits: {enabled: false// remove high chart logo hyper-link},
六:完整Demo源码
运行效果如下:My Demo 1 High Chart Demo 1
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文题目:HighChart学习-更新数据dataSeries与重绘-创新互联
网页路径:http://pwwzsj.com/article/djjdph.html