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. Qt通过Http上传文件（路过）

    web端: <?php $c = $GLOBALS['HTTP_RAW_POST_DATA']; $n = $_GET["filename"]; $fp = fopen($n ...

  2. 通过 CsvListWriter 读写.csv文件辅助类

    package cn.gov.cnis.db; import java.io.File; import java.io.FileReader; import java.io.FileWriter; i ...

  3. onhashchange事件--司徒正美

    onhashchange事件是针对AJAX无缝刷新导致后退键失效而产生的事件,因此属于一个够新的事件,浏览器兼容性如下: Feature Chrome Firefox IE Opera Safari ...

  4. 展开BOM并使用最终用量的算法(转载)

    本文系转载子ITPUB,如果有侵犯您权益的地方,烦请及时的告知与我,我即刻将停止侵权行为: 网址:http://www.itpub.net/thread-1020586-1-1.html http:/ ...

  5. SQL server与Oracle触发器的创建与使用

    SQL Server 1创建触发器 GO BEGIN IF (object_id('WMY', 'tr') is not null) DROP trigger WMY END; GO CREATE T ...

  6. UVa 116 Unidirectional TSP (DP)

    该题是<算法竞赛入门经典(第二版)>的一道例题,难度不算大.我先在没看题解的情况下自己做了一遍,虽然最终通过了,思路与书上的也一样.但比书上的代码复杂了很多,可见自己对问题的处理还是有所欠 ...

  7. mysql innodb init function error

    150414 16:23:07 [ERROR] Plugin 'InnoDB' init function returned error. 150414 16:23:07 [ERROR] Plugin ...

  8. Exception和RuntimeException

    public class RuntimeExceptionDemo01 { public static void main(String[] args) {     String string=&qu ...

  9. phpstorm 同步远程服务器代码

    1.打开view —Toolbar,点击红框中的小工具 2.单击Deployment,在connection中填写对应选项, 其中:type勾选sftp root path :点击后面的Autodet ...

  10. html 转 js 字符串

    看到一个牛人的博客  http://riny.net/lab/#tools_html2js 看了下他的代码  挺棒的 所依赖的两个库在这里 https://github.com/Bubblings/l ...