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. oracle初始安装大小

    oracle初始安装大小 /ruiy/ocr/DBSoftware/app/oracle/ruiy/ocr/DBSoftware/app/oraInventory/ruiy/ocr/DBData/or ...

  2. js原生forEach、map与jquery的each、$.each的区别

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. js 使用for循环遍历数组

    今天写个无聊的东西!for循环的使用! 例如以下:定义a数组,b为伪数组! var a = [1,2,3,0,5,4]; var b = document.getElementsByTagName(' ...

  4. .NET平台和C#语言

    .NET平台的作用C#语言通过.NET平台来编写 部署 运行.NET应用程序. 为什么学习.NET语言1. C#语言是为.NET平台而生的.2. C#语言是完全面向对象的语言,所以一般情况下我们用C# ...

  5. css两个紧挨着的css选择器修饰同一个元素

    #status, .commands{ height: 25px; line-height: 25px;}.upload .commands{ float: right;}.hidden{ displ ...

  6. javascript 的加载方式

    本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...

  7. VS2015使用scanf报错解决方案

    版权声明:本文为博主原创文章,未经博主允许不得转载. 方法一:在程序最前面加#define _CRT_SECURE_NO_DEPRECATE: 方法二:在程序最前面加#define _CRT_SECU ...

  8. 调度器(scheduler)

    调度器(schedule)为游戏提供定时事件和定时调用服务. 调度器(schedule)的功能和事件监听器(eventlistener)的功能有点类似:都是在特定情况下调用某个事先准备好的回调函数. ...

  9. 并发编程：c++11 多线程中随机数重复问题

    srand(time(NULL)); 是我们熟悉的c++随机函数,用时间做种子.但由于在多线程环境下若想在子线程中随机出不同的随机数则需随机种子的不同.但time以秒计算,略显不足,故参考这篇文章解决 ...

  10. T-SQL应用，视图、存储过程、触发器、游标、临时表等

    sqlserver常用操作: 视图.存储过程.触发器.函数 --*********************批处理********************* --[在一个批处理中存有一个语法错误,则所有 ...