highcharts动态曲线的实现

最新推荐文章于 2021-08-25 12:20:19 发布

xcw08

最新推荐文章于 2021-08-25 12:20:19 发布

阅读量775

点赞数

分类专栏： JavaScript Ext 文章标签： c# ui 前端 ViewUI

本文链接：https://blog.csdn.net/xcw08/article/details/84481009

版权

本文介绍了Highcharts这个强大的前端图表库，它用于创建交互式图表，支持多种图表类型。文章强调了HighCharts的优美UI、良好的浏览器兼容性和纯JS的编写方式，无需额外插件。接着，通过一个具体的例子展示了如何在实际项目中使用HighCharts绘制动态曲线图，代码中利用Extjs和jQuery的ajax同步方法加载数据，并实现了每半分钟动态刷新的效果。

摘要由CSDN通过智能技术生成

Highcharts是一个非常成熟的绘制图表的前端库，由纯JS编写。能够很方便的在实际项目中添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

HighCharts的UI设计非常优美，由于使用纯JS编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度较快。最重要的是，HighCharts还有很好的兼容性，能够兼容当前主流的浏览器。详细的文档，可以参考：www.highcharts.com.

下面，我将分享使用highcharts在实际项目中绘制动态曲线图的例子，先上代码：

QtAvgCostChartPanel = function() {
	this.plot;
	var scope = this;
	//获取Provider(应用名)
	var appArr2store = buildCombo.getApp();
	//当Provider App默认值为search时，按search加载Service Name、Service MethodName及providerHost默认的下拉框列表
	//获取ProviderHost
	var providerArr2store = buildCombo.getProvider('search');
	//获取service(服务名)
	var serviceArr2store = buildCombo.getService('search');
	//初始化service methodName(服务方法名)
	var methodArr2store =  new Ext.data.ArrayStore({
		fields:['methodName','methodName']
	}); 
	this.toolBar = [ '-', 'Provider App:', {
		id : 'providerApp_QtAvg',
		xtype : 'combo',
		width : 155,
		listWidth : 200,
		value : 'search',//设置默认值
		store : appArr2store,
		valueField : 'appCode',
		displayField : 'appCode',
		selectOnFocus : true,