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这个回调里面的返回值。
=============== 不是十分完整,待补充 ==============
相关推荐
API(Application Programming Interface)是开发者与HighCharts库交互的桥梁,通过调用特定的函数和方法,可以设置和操作图表的各种属性和功能。例如,`Highcharts.chart()`是创建新图表的主要方法,需要传入容器ID...
在`easyUI`中,时间控件是一种常见的交互元素,允许用户选择日期或时间,常见于日程安排、预约系统等场景。`easyUI`的时间控件通常结合日期插件使用,支持多种时间格式,并能轻松实现日期和时间的格式化,提供了一种...
7. **模块化**:Highcharts提供了一些可选的扩展模块,如Drilldown(层级下钻)、Map(地图)等。 四、使用步骤 1. **引入库文件**:在HTML文件中引入jQuery和Highcharts的相关脚本文件。 2. **准备数据**:根据...
5. **交互性**:Highcharts的图表支持鼠标悬停、点击等交互事件,可以触发自定义函数,实现图表的进一步操作,如弹出详细信息框、高亮数据点等。 6. **图表类型**:Highcharts支持多种图表类型,包括但不限于: - ...
Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建各种丰富的数据可视化效果,广泛应用于Web应用程序中。这款库以其易用性、灵活性和丰富的图表类型而备受赞誉。在Highcharts中,你可以选择不同的图表...
在“highcharts demo”这个项目中,我们看到它主要用于以时间作为X轴展示数据变化,这是一种常见的时间序列分析方式,广泛应用于数据分析和可视化场景。 Highcharts的核心特性包括: 1. **跨浏览器兼容性**:...
6. **高级特性**:除了基本功能,Highcharts还包含一些高级特性,如地图(Map)、热力图(Heatmap)、瀑布图(Waterfall)等。这些特性扩展了其在复杂数据可视化场景的应用。 7. **API和事件**:Highcharts提供了...
总结来说,"highcharts4.1.8"这个压缩包为开发者提供了一个完整的Highcharts 4.1.8开发环境,包括源代码、API文档和一些示例。开发者可以通过学习API文档,结合样例,快速掌握如何使用Highcharts和Highstock创建各种...
Highcharts Gantt 7.2.1是一款强大的JavaScript图表库,专为呈现Gantt图而设计,用于在网页上绘制时间轴和项目管理图表。它基于Highcharts的基础框架,提供了丰富的功能,使得开发者能够轻松创建复杂的甘特图,用于...
Highcharts-2.3.5 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线...
总结来说,Highcharts是JavaScript图表库的优秀选择,提供多种图表类型和丰富的配置选项,适合于各种数据可视化需求。无论你是前端开发者还是数据分析师,掌握Highcharts都能提升你的工作效率,为你的项目增添生动、...
4. **code** - 这个目录可能包含了一些源码或者脚本,可能包括Highcharts的核心库文件,或者是与示例相关的JavaScript代码。通过查看这个目录,开发者可以深入理解Highcharts的工作原理和API使用。 在使用...
Highcharts图表库是一款广泛应用于网页数据可视化的JavaScript库,它提供了丰富的图表类型,如柱状图、折线图、饼图、散点图等,帮助开发者轻松创建交互式的图表。v9.3.3是Highcharts的一个更新版本,带来了更多功能...
Highcharts是一款流行的JavaScript图表库,主要用于在网页中生成交互式的图表,包括各种常见的图表类型如折线图、柱状图、饼图等。为了方便中文用户学习和使用Highcharts,这里整理了一些基础知识点和常用配置项,...