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. Michael Kors - Wikipedia, the free encyclopedia

    Michael Kors - Wikipedia, the free encyclopedia Michael Kors From Wikipedia, the free encyclopedia   ...

  2. nodejs开发微信1——微信access-token和tickets的数据模型

    /* jshint -W079 */ /* jshint -W020 */ "use strict"; //var _ = require("lodash"); ...

  3. Seinfeld（栈模拟）

    Seinfeld Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  4. 【leetcode边做边学】二分查找应用

    很多其它请关注我的HEXO博客:http://jasonding1354.github.io/ 简书主页:http://www.jianshu.com/users/2bd9b48f6ea8/lates ...

  5. QT 信号与槽 QT简单加法器的实现

    信号与槽 背景: 面向过程 模块之间低耦合设计(高内聚). 函数调用: 直接调用 回调调用(低耦合) 面向对象 模块之间低耦合设计(高内聚) 对象调用 直接调用 接口调用 QT: 信号与槽解决问题: ...

  6. vlan trunk vtp端口聚合

    第一步:端口聚合(两端都需要做相同的操作) 第二步:在服务器端配置为服务器模式 第四步:在服务器端添加vlan 第五步:在两端分别将不同的端口添加到不同的vlan

  7. UISearchBar--改变内部输入框的背景颜色

    思路是获取UISearchBar的子视图,判断他是否是输入框(注意不要先入为主地认为是UITextField),最后修改背景色.至于UISearchBar的子视图结构,在不同的iOS版本可能会不一样, ...

  8. 在VC中，为图片按钮添加一些功能提示(转)

    在VC中,也常常为一些图片按钮添加一些功能提示.下面讲解实现过程:该功能的实现主要是用CToolTipCtrl类.该类在VC  msdn中有详细说明.首先在对话框的头文件中加入初始化语句:public ...

  9. CKEditor + CKFinder 实现编辑上传图片配置 （二）

    CKEditor + CKFinder 实现编辑上传图片配置 (二) 上传图片时,如果上传的图片过大,默认情况情况下回自动裁剪,代码如图 \ckfinder\config.php 目录下的配置文件co ...

  10. [置顶] 修改Android开机画面之rle制作

    第一个动画: Bootloader开机使用的图片是linux.bmp,长高分别是120*120,色度是32,所以可以拿相同格式图片替换,进行编译烧写即可. 第二个图片:内核logo 这个修改方式,我在 ...