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事件即可，示例代码如下所示：

plotOptions: {
series: {
point: {
events: {
click: function () {
//柱子的点击事件
}
}
}
}
},

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

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

plotOptions: {
series: {
point: {
events: {
click: function () {
//获得所点击柱子对应的X轴刻度
var category = this.category;
if (category) {
switch (category) {
case "六月份":
//更新数据
this.update({
y: 40000
});                                          
break;
}
}
}
}
}
}
},

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

3、更新柱子对应的刻度

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

this.update({
y:40000,
category:'九月份'
}
);
 
//或者这样
this.update({
y:40000,
x:'九月份'
});

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

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

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

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

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

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

完整示例代码如下所示：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>highcharts图表点击柱子动态改变数据值和对应刻度</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
 
//图表配置项
var options = {
chart: {
type: "column"
},
title: {
text: '各大站点每月独立IP量关系图呈现'
},
subtitle: {
text: 'From:www.stepday.com'
},
xAxis: {
categories: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份']
},
yAxis: {
title: {
text: '独立IP'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
credits: {
text: "www.stepday.com",
href: "http://www.stepday.com",
style: {
color: "red"
}
},
plotOptions: {
series: {
point: {
events: {
click: function () {
//获得所点击柱子对应的X轴刻度
var category = this.category;
if (category) {
switch (category) {
case "六月份":
//更新数据
this.update({
y: 40000
});
//更新刻度
var chart = $('#container').highcharts();
if (chart) {
var categories = chart.xAxis[0].categories;
//更新最后一个刻度
categories[categories.length - 1] = "八月份";
chart.xAxis[0].setCategories(categories, true);
}
break;
}
}
}
}
}
}
},
series: [{
name: 'stepday',
data: [30020, 25186, 45356, 63452, 34554, 49327]
}]
};
 
///创建图表 根据options设置
function CreateHighcharts() {
$('#container').highcharts(options);
}
 
$(function () {
CreateHighcharts();
});
 
</script>
</head>
<body>
<div id="container" style="width: 400px; margin: 0 auto">
</div>   
</body>
</html>

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

posted on 2014-10-28 09:47 杨小样儿阅读(2905) 评论(0) 收藏举报

刷新页面返回顶部

杨小样儿

导航

公告

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

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