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. 关于jquery的each的操作；

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 自己定义View常处理的回调函数

    onFinishInflate() 当View中全部的子控件均被映射成xml后触发 onMeasure(int, int) 确定全部子元素的大小 onLayout(boolean, int, int, ...

  3. 列表的实现-----数据结构与算法JavaScript描述 第三章

    实现一个列表 script var booklist = new List(); booklist.append('jsbook'); booklist.append('cssbook'); book ...

  4. Ext.Net 使用总结之查询条件中的起始日期

    2.关于查询条件中起始日期的布局方式 首先上一张图,来展示一下我的查询条件的布局,如下: 大多数时候,我们的查询条件都是一个条件占一个格子,但也有不同的时候,如:查询条件是起始日期,则需要将这两个条件 ...

  5. linux杂记（八）linux压缩与打包

    linux系统常见的压缩指令 一般被压缩过的档案,通常其附档名都是[*.tar,*.tar.gz,*.tgz,*.gz,*.Z,*.bz2]等等. *.tar:tar程序打包的数据.并没有压缩过 *. ...

  6. mysql 简单游标

    <=====================MYSQL 游标示例=====================> CREATE PROCEDURE `test`.`new_procedure` ...

  7. vc6.0批量编译

    一直想研究一下怎么让电脑批处理编译程序,今天就从vc6开始,做个记录,学习一下. VC可以生成make文件(Project->Export Makefile),在设置好环境变量下,执行NMAKE ...

  8. 简单OC程序

       Foundation框架头文件的路径 1> 右击Xcode.app --> 显示包内容 2> Xcode.app/Contents/Developer/Platforms/iP ...

  9. jquery 小插件，完成“输入字段预期值的提示信息”，防html5 placeholder属性

    前言:在很多时候,我们需要文本框中显示默认值,获取焦点时,文字框中就会清空给的值,当失去焦点时,如果没有值,继续显示默认的文字,如果有输入值,就显示输入的值.现在项目中需要用到这个地方的功能比较多,于 ...

  10. stl 迭代子的失效

    迭代子是STL中很重要的特性,但是其很脆弱(我个人认为),因为使用它的条件很苛刻,一不小心就失效了.其在两中情况下可能会失效. 1．当容器有插入操作时 在初始化了迭代子后,如果容器有插入操作时,迭代子 ...