`
Everyday都不同
  • 浏览: 723618 次
  • 性别: Icon_minigender_1
  • 来自: 宇宙
社区版块
存档分类
最新评论

[总结时间Summary Time] Highcharts的一些常见操作

    博客分类:
  • jsp
阅读更多

HIghcharts是很强大的图表绘制插件,它是基于纯js绘制的。当然地,对于图表也会有很多操作了。下面就我工作时遇到的一些比较常见的highcharts的操作进行小结,不是很完整。

 

1)绘制Highcharts图形:

语法其实很「jquery」,只需$("#divId").highcharts(options);其中options为一个{ }结构,包含各种选项,这些选项是典型的json语法。这样就把一个highcharts图形填充到指定的div中了(div的id为divId);

 

2)获取Highcharts各种对象:

获取chart本身, 语法同样「jquery」$("#divId").highcharts()

获取highcharts的series ,很简单,先获取chart, 再chart.series即可(同理其他选项也是如此——其实就是获取json某个value的语法嘛);

注意highcharts的series是一个数组[], 你想具体到某个serie,需要加下标如chart.series[0]。

 

3)删除某个series: series[n].remove(false); //false表示不重绘chart;

 

4)为某个series加点,这常常用在走势图的动态刷新当中——addPoint:

比如,series[0].addPoint( [x,y]|y, boolean redraw, boolean shift)语法中,第三个boolean值Boolean shift如果为true,则表明添加一个点后,同时第一个点会被remove掉,视觉上就是图形动态往前移;若为false, 则是第一个点仍然在那,视觉上就是图形被挤压“皱”起来。而第二个参数Boolean redraw重绘当然设置为true了~~~~

 

5)设置x轴的category:

很常见,常用于条形图,雷达图,饼图等图形当中。这些图的category如果是动态从后台读取的话,需用此语法设置。

首先你必须找到xAxis,注意xAxis也是数组。所以要这样先获取:var xAixs = chart.xAxis[0]然后xAixs .setCategories(transTimeCategory, false);//false表示不重绘chart,第一个参数往往是后台传过来的字符串集合;

 

6)Js函数返回series,常常用于动态刷新上的点,如:

 

var series = [{
			name:'总量', 
			data: transCountList, 
			marker: {
				enabled: false
			}
		}];
	return series;

 其中,data数据来源为transCountList,而往往是一个后台返回的List<Map<String, Object>>集合。Map<String, Object>的key为x或y, Object则为时间毫秒数,y为数值型数据。

 

 

7)chart.addSeries——常常用于条形图饼图雷达图等y轴上的数据刷新。

如:

 

avgTimeChart.addSeries({ 
	color:'green',
	data: transTimeData
}, false);

其中 transTimeData往往是数值型数据的集合如List<Double> List<Integer> List<Long>等~~

 

 

8)chart.redraw()  这句话在setCategories和addSeries操作之后调用很有必要,之所以前面的操作第二个参数都是false,是想在操作都完事之后再统一调用redraw,  这常常用于图形的定时刷新中。

 

9)highcharts默认支持最多显示的series的点的个数为999个,如果想显示更多,请在series:{turboThreshold: number}里用number指定你想要显示最多的个数。

 

10)series.remove

var series = chart.series; 
while(series.length > 0) {  
	series[0].remove(false);//remove这个series之后是否重绘charts  
} 

 常常用于需结合后台动态给这个chart的series赋值时,需首先把画一个“空架子”的series:[]先删掉,再自己addSeries。。

 

btw,不能在ajax的success里面return,若想要得到ajax的后台返回值并把它作为js函数的返回值,只能另外定义一个变量去接收返回值,然后再return这个变量。原因是success是ajax的一个回调部分,他的返回值只是一个局部变量,你无法return这个回调里面的返回值。

 

=============== 不是十分完整,待补充 ==============

 

 

分享到:
评论

相关推荐

    HighCharts一些demo和API

    API(Application Programming Interface)是开发者与HighCharts库交互的桥梁,通过调用特定的函数和方法,可以设置和操作图表的各种属性和功能。例如,`Highcharts.chart()`是创建新图表的主要方法,需要传入容器ID...

    easyUI,Highcharts,时间控件例子

    在`easyUI`中,时间控件是一种常见的交互元素,允许用户选择日期或时间,常见于日程安排、预约系统等场景。`easyUI`的时间控件通常结合日期插件使用,支持多种时间格式,并能轻松实现日期和时间的格式化,提供了一种...

    jquery Highcharts jquery Highcharts

    7. **模块化**:Highcharts提供了一些可选的扩展模块,如Drilldown(层级下钻)、Map(地图)等。 四、使用步骤 1. **引入库文件**:在HTML文件中引入jQuery和Highcharts的相关脚本文件。 2. **准备数据**:根据...

    highcharts

    5. **交互性**:Highcharts的图表支持鼠标悬停、点击等交互事件,可以触发自定义函数,实现图表的进一步操作,如弹出详细信息框、高亮数据点等。 6. **图表类型**:Highcharts支持多种图表类型,包括但不限于: - ...

    Highcharts

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建各种丰富的数据可视化效果,广泛应用于Web应用程序中。这款库以其易用性、灵活性和丰富的图表类型而备受赞誉。在Highcharts中,你可以选择不同的图表...

    highcharts demo

    在“highcharts demo”这个项目中,我们看到它主要用于以时间作为X轴展示数据变化,这是一种常见的时间序列分析方式,广泛应用于数据分析和可视化场景。 Highcharts的核心特性包括: 1. **跨浏览器兼容性**:...

    highcharts示例代码(官方例子)

    6. **高级特性**:除了基本功能,Highcharts还包含一些高级特性,如地图(Map)、热力图(Heatmap)、瀑布图(Waterfall)等。这些特性扩展了其在复杂数据可视化场景的应用。 7. **API和事件**:Highcharts提供了...

    highcharts4.1.8

    总结来说,"highcharts4.1.8"这个压缩包为开发者提供了一个完整的Highcharts 4.1.8开发环境,包括源代码、API文档和一些示例。开发者可以通过学习API文档,结合样例,快速掌握如何使用Highcharts和Highstock创建各种...

    Highcharts-Gantt-7.2.1_highcharts_highchartsgantt_

    Highcharts Gantt 7.2.1是一款强大的JavaScript图表库,专为呈现Gantt图而设计,用于在网页上绘制时间轴和项目管理图表。它基于Highcharts的基础框架,提供了丰富的功能,使得开发者能够轻松创建复杂的甘特图,用于...

    HighCharts

    Highcharts-2.3.5 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线...

    Highcharts图表库 v9.3.3.zip

    Highcharts图表库是一款广泛应用于网页数据可视化的JavaScript库,它提供了丰富的图表类型,如柱状图、折线图、饼图、散点图等,帮助开发者轻松创建交互式的图表。v9.3.3是Highcharts的一个更新版本,带来了更多功能...

    Highcharts js生成图表

    总结来说,Highcharts是JavaScript图表库的优秀选择,提供多种图表类型和丰富的配置选项,适合于各种数据可视化需求。无论你是前端开发者还是数据分析师,掌握Highcharts都能提升你的工作效率,为你的项目增添生动、...

    Highcharts-9.3.2.zip

    标题中的"Highcharts-9.3.2.zip"表明这是一个包含Highcharts库版本9.3.2的压缩文件,开发者可以下载并解压来使用这个版本的库。 在描述中提到了几个关键点,首先,Highcharts兼容IE6及以上的浏览器,这在现今许多...

    Highcharts包

    4. **code** - 这个目录可能包含了一些源码或者脚本,可能包括Highcharts的核心库文件,或者是与示例相关的JavaScript代码。通过查看这个目录,开发者可以深入理解Highcharts的工作原理和API使用。 在使用...

Global site tag (gtag.js) - Google Analytics