highcharts图表组件入门教程：如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度

作者：highcharts | 时间：2014-6-11 14:07:05 | [小  大] | 来源：highcharts入门教程 | 阅读：4537 |   评论： 0 |  收藏
highcharts图表组件入门教程柱状图点击柱子动态更新当前数据值对应刻度名称  
 [摘要]： 我们来做一个比较有意思的练习，点击柱状图指定柱子时动态切换当前柱子数据值和对应的刻度名称，以此进行数据覆盖效果。 首先我们来分析一下如何展开： 1、需要监听柱子的点击事件； 2、更新当前柱子的数据值； 3、更新当前柱子所对应的X轴刻度； 既然思路已经明了了，那么我们就开始展开吧： 1、监听柱子点击事件 监听柱子点击事件我们一直以来都是在plotOptions内配置point的events内的click事件即可，示例代码如下所示： plotOptions: { series: { point: { events: { ...

我们来做一个比较有意思的练习，点击柱状图指定柱子时动态切换当前柱子数据值和对应的刻度名称，以此进行数据覆盖效果。

首先我们来分析一下如何展开：

1、需要监听柱子的点击事件；

2、更新当前柱子的数据值；

3、更新当前柱子所对应的X轴刻度；

既然思路已经明了了，那么我们就开始展开吧：

1、监听柱子点击事件

监听柱子点击事件我们一直以来都是在plotOptions内配置point的events内的click事件即可，示例代码如下所示：

01.plotOptions: {
02.series: {
03.point: {
04.events: {
05.click: function () {
06.//柱子的点击事件
07.}
08.}
09.}
10.}
11.},

2、更新当前柱子的数据值

既然我们可以再click事件内拿到了this数据点的对象，那么我们完全可以结合point的update({});方法执行数据值的更新操作。但是有一点需要注意的是，需要对指定柱子进行数据更新，所以我们可以通过刻度名称来进行判断：

01.plotOptions: {
02.series: {
03.point: {
04.events: {
05.click: function () {
06.//获得所点击柱子对应的X轴刻度
07.var category = this.category;
08.if (category) {
09.switch (category) {
10.case "六月份":
11.//更新数据
12.this.update({
13.y: 40000
14.});                                          
15.break;
16.}
17.}
18.}
19.}
20.}
21.}
22.},

当点击柱子的刻度为“六月份”的时候，更新掉当前柱子的数据值为40000。

3、更新柱子对应的刻度

更新柱子对应的刻度问题很令人恼火，不能像更新数据点数据值那样可以这样进行更新：

01.this.update({
02.y:40000,
03.category:'九月份'
04.}
05.);
06. 
07.//或者这样
08.this.update({
09.y:40000,
10.x:'九月份'
11.});

既然这样都是不行的，那么我们如何才能够执行刻度更新呢？

既然xAxis对象有setCategories(categories,true)，我们不妨采用这个进行刻度的整体更新，毕竟是不会刷新整个图表的。

1.//更新刻度
2.var chart = $('#container').highcharts();
3.if (chart) {
4.var categories = chart.xAxis[0].categories;
5.//更新最后一个刻度
6.categories[categories.length - 1] = "八月份";
7.chart.xAxis[0].setCategories(categories, true);
8.}

这样一来我们就可以达到点击柱子切换数据的效果了。

图1：点击柱子前的效果图

图2：点击柱子后的效果图

完整示例代码如下所示：

01.<!DOCTYPE HTML>
02.<html>
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
05.<title>highcharts图表点击柱子动态改变数据值和对应刻度</title>
06.<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
07.<script type="text/javascript" src="js/highcharts.js"></script>
08.<script type="text/javascript">
09. 
10.//图表配置项
11.var options = {
12.chart: {
13.type: "column"
14.},
15.title: {
16.text: '各大站点每月独立IP量关系图呈现'
17.},
18.subtitle: {
19.text: 'From:www.stepday.com'
20.},
21.xAxis: {
22.categories: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份']
23.},
24.yAxis: {
25.title: {
26.text: '独立IP'
27.},
28.plotLines: [{
29.value: 0,
30.width: 1,
31.color: '#808080'
32.}]
33.},
34.credits: {
35.text: "www.stepday.com",
37.style: {
38.color: "red"
39.}
40.},
41.plotOptions: {
42.series: {
43.point: {
44.events: {
45.click: function () {
46.//获得所点击柱子对应的X轴刻度
47.var category = this.category;
48.if (category) {
49.switch (category) {
50.case "六月份":
51.//更新数据
52.this.update({
53.y: 40000
54.});
55.//更新刻度
56.var chart = $('#container').highcharts();
57.if (chart) {
58.var categories = chart.xAxis[0].categories;
59.//更新最后一个刻度
60.categories[categories.length - 1] = "八月份";
61.chart.xAxis[0].setCategories(categories, true);
62.}
63.break;
64.}
65.}
66.}
67.}
68.}
69.}
70.},
71.series: [{
72.name: 'stepday',
73.data: [30020, 25186, 45356, 63452, 34554, 49327]
74.}]
75.};
76. 
77.///创建图表 根据options设置
78.function CreateHighcharts() {
79.$('#container').highcharts(options);
80.}
81. 
82.$(function () {
83.CreateHighcharts();
84.});
85. 
86.</script>
87.</head>
88.<body>
89.<div id="container" style="width: 400px; margin: 0 auto">
90.</div>   
91.</body>
92.</html>

转载于http://www.stepday.com/topic/?921 

highcharts图表组件入门教程：如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度的更多相关文章

  1. Android实现监听控件点击事件

    Android实现监听控件点击事件 引言 这篇文章主要想写一下Android实现监听点击事件的几种方法,Activity和Fragment实现起来有些方法上会有些不同,这里也略做介绍. 最近一直在忙一 ...

  2. 监听tableview的点击事件

    // 监听tablview的点击事件 - (void)addAGesutreRecognizerForYourView { UITapGestureRecognizer *tapGesture = [ ...

  3. Android监听消息通知栏点击事件

    Android监听消息通知栏点击事件 使用BroadCastReceiver 1 新建一个NotificationClickReceiver 类,并且在清单文件中注册!! public class N ...

  4. Android 使用 OnTouchListener 接口监听双击或多击事件

    这里是使用 OnTouchListener 实现的监听双击 or 多击的监听器.通过 View.setOnTouchListener ,可以实现在任意 View 上监听双击事件. 网上有许多文章简单的 ...

  5. Android 监听按钮的点击事件

    onClick事件1.Button和ImageButton都拥有一个onClick事件 通过自身的.setOnClickListener(OnClickListener)方法添加点击事件2.所有的控件 ...

  6. 前端组件化Polymer入门教程(6)——监听属性值变化

    监听属性值变化 如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id=&quo ...

  7. cocos2d-x JS 弹出对话框触摸监听（吞噬点击事件遮挡层）

    在游戏中,我们经常会碰到一些弹窗,这些弹窗禁止点透,也就是禁止触摸事件传递到底层,我们称之为遮挡层,这些遮挡层,需要开发遮挡层,我们首先得了解cocos2d-js的触摸传递机制. 根据官方文档,我们可 ...

  8. Android控件——监听按钮的点击事件

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAroAAAFTCAIAAABZPDiZAAAgAElEQVR4nOy9918UWfb///1jdu2uBs

  9. 监听grid行点击事件

随机推荐

  1. [虚拟化/云][全栈demo] 为qemu增加一个PCI的watchdog外设（七）

    目标: 1. 完成最终的设备驱动,增加具体的watchdog设备操作的代码. 测试代码: 代码最终实现见cwd_demo.c 代码只实现了read与write.  没有实现ioctl. 因此,我们可以 ...

  2. hibernate中文查询时无查询结果

    原因很简单,问题在于我连接mysql用的url时,没有指定字符集,导致查询不到任何数据 问题出在 hibernate.xml配置文件中: 将 <property name="jdbcU ...

  3. 如何显示Mac OS X上的隐藏文件和文件夹

    显示隐藏文件以及文件夹命令: defaults write com.apple.finder AppleShowAllFiles YES Mac显示隐藏文件 对于OS X Mavericks 10.9 ...

  4. Android入门第十六篇之Style与Theme [转]

    本文来自http://blog.csdn.net/hellogv/ ,引用必须注明出处! 越来越多互联网企业都在Android平台上部署其客户端,为了提升用户体验,这些客户端都做得布局合理而且美观.. ...

  5. Objective-C 类属性和方法的訪问权限

    OC中提供了4种訪问权限.@private, @public, @protected这三种和其它的C++, Java是一样的,@package这个訪问权限并非Java里的包訪问权限,OC中没有包的概念 ...

  6. SQL学习之Insert的特殊用法(插入检索出的数据,表之间的数据复制)

    1.插入检索出的数据 select * from dbo.Customers_1

  7. Ubuntu - Dconf 注册表键值修改参考表

    gsettings reset org.gnome.desktop.wm.preferences theme默认gnomegsettings set org.gnome.desktop.interfa ...

  8. English - allow to do 与 allow doing 的区别

    英语中并没有allow to do sth这种结构,只有allow doing sth 及allow sb to do sth这两个结构. 你这样记忆可能方便一些: 1. 在主动语态中,如果allow ...

  9. vs vsvim viemu vax 备忘

    使用gt和gT往返标签 gd:到达光标所在处函数或者变量的定义处. *:读取光标处的字符串,并且移动光标到它再次出现的地方. #:和上面的类似,但是是往反方向寻找. /text:从当前光标处开始搜索字 ...

  10. js简单实现链式调用

    链式调用实现原理:对象中的方法执行后返回对象自身即可以实现链式操作.说白了就是每一次调用方法返回的是同一个对象才可以链式调用. js简单实现链式调用demo Object.prototype.show ...