查看: 415|回复: 6
如何根据xAxis轴step出来的数据在图表上添加 dataLabels
TA的每日心情奋斗 15:27签到天数: 22 天[LV.4]偶尔看看III主题帖子积分
HC 老手, 积分 405, 距离下一级还需 95 积分
HC 老手, 积分 405, 距离下一级还需 95 积分
如图片里面显示的那样，是11月份的各天数，01、06、11、16、21、26；这是使用xAixs中的step:5设置出来的
如果只在图表中显示这几天对应的数据呢？？其它时间就隐藏起来。。
同时，当日期少的时候，step会自动改变间隔，但凡是xAxis显示出来的数据，其对应的值才可以显示。。
如何才能做到呢？
@8)ZF]RQWP)`_A_M2Y5EJ{F.jpg (83.66 KB, 下载次数: 0)
15:38 上传
TA的每日心情奋斗 15:27签到天数: 22 天[LV.4]偶尔看看III主题帖子积分
HC 老手, 积分 405, 距离下一级还需 95 积分
HC 老手, 积分 405, 距离下一级还需 95 积分
本帖最后由 qmy777 于
12:14 编辑
时间轴获取下标的问题。
参考这个帖子：
昨天快6点的时候终于搞定了。。
plotOptions: {
series: {
& & formatter: function(){
& && &&&var index = this.xData.indexOf(event.point.x);
& && &&&if(index%5 == 0){
& && && && &return this.series.y;
& && &&&}else{
& && && && &
& && &&&}
& & }
}
},复制代码
前面那个this后面少了个series，，然后把你那个帖子里面的events改成this就可以了。。
厉害，一点就通&
TA的每日心情奋斗6&小时前签到天数: 270 天[LV.8]以坛为家I主题帖子积分
很简单，自定义 dataleable 的 formatter 函数，根据下标判断是否显示该点的值，实现代码如下：
plotOptions: {
& & series: {
& && &&&dataLabels: {
& && && && &enabled: true,
& && && && &formatter:function(){
& && && && && & var index = this.point.x;& &// 点的下标
& && && && && & if(index%3==0) {& && && && &// 根据条件是否显示该点的值
& && && && && && &&&return this.y;
& && && && && & }else {
& && && && && && &&&
& && && && && & }
& && && && &}
& && &&&},
& && &&&enableMouseTracking: false
& & }
},复制代码最后，贴个图
dataleables.png (15.9 KB, 下载次数: 0)
15:59 上传
大神就是大神啊。。&
TA的每日心情奋斗 15:27签到天数: 22 天[LV.4]偶尔看看III主题帖子积分
HC 老手, 积分 405, 距离下一级还需 95 积分
HC 老手, 积分 405, 距离下一级还需 95 积分
很简单，自定义 dataleable 的 formatter 函数，根据下标判断是否显示该点的值，实现代码如下：
最后，贴个 ...
那我这些是通过Date.UTC()获取的时间戳，，无法进行计算呐。。怎么办？
TA的每日心情奋斗6&小时前签到天数: 270 天[LV.8]以坛为家I主题帖子积分
那我这些是通过Date.UTC()获取的时间戳，，无法进行计算呐。。怎么办？
时间轴获取下标的问题。
参考这个帖子：
注册账号后通过邮箱认证的会员
经常参与各类话题的讨论，发帖内容较有主见
经常帮助其他会员答疑
长期对论坛的繁荣而不断努力，或多次提出建设性意见
活跃且尽责职守的版主
曾经为论坛做出突出贡献目前已离职的版主
为论坛做出突出贡献的会员
Powered byhighcharts柱状图添加事件,关于传参问题,点击怎么拿到当前柱的各种数据(比如X.Y值等)..?_百度知道
highcharts柱状图添加事件,关于传参问题,点击怎么拿到当前柱的各种数据(比如X.Y值等)..?
this表示当前的条形柱.x 和this..x 获取柱子的x轴值.y获取该柱子的y轴值 this，this，可以通过this..name 获取柱子的名字，this.y是undefined啊拿不到其中
提问者采纳
jpg" target="_blank" title="点击查看大图" class="ikqb_img_alink"><img class="ikqb_img" src="http.jpg" esrc="http://g.com/zhidao/pic/item/d1a20cf431adcbeff09ea01aaeaf2edda3cc9f00.category和event://g用event://g.hiphotos.y实现.com/zhidao/wh%3D600%2C800/sign=208943ffff1f152fb9f2/d1a20cf431adcbeff09ea01aaeaf2edda3cc9f00.hiphotos.baidu.point.baidu，<a href="http.point./zhidao/wh%3D450%2C600/sign=b6d9ce3397cad1c8d0eefb3f/d1a20cf431adcbeff09ea01aaeaf2edda3cc9f00
提问者评价
来自：求助得到的回答
其他类似问题
highcharts的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁当前位置： >
使用Highcharts生成柱状图
时间： 22:07 来源：互联网 作者：未知 阅读：？次
柱状图广泛应用于数据统计和分析，它是由一系列高度不等的纵向条纹表示数据分布的情况，能够直观的表示数据间的差异。柱状图可以是纵向和横向排列，本文讲解通过Highcharts生成一个年度财经支出统计图和一个男女比例分布图。
1、年度财经支出统计图
通过以下配置，可以生成一个柱状图与曲线图共存、双Y轴、X轴标签旋转（标签名称太长的情况）、XY轴均可放大的、去除LOGO信息的统计图表。具体请看代码和注释：
$(function() {
chart = new Highcharts.Chart({
renderTo: 'chart_column', //图表放置的容器，关联DIV#id
zoomType: 'xy'
//X、Y轴均可放大
//因为是柱状图和曲线图共存在一个图表中，所以默认图表类型不在这里设置。
text: '年财经支出统计图' //图表标题
subtitle: {
text: '数据来源：新浪财经'
//图表副标题
credits: {
enabled: false
//不显示LOGO
xAxis: [{ //X轴标签
categories: ['2010年3月', '2010年4月', '2010年5月', '2010年6月', '2010年7月',
'2010年8月', '2010年10月', '2010年11月', '2010年12月', '2011年3月', '2011年4月', '2011年5月',
'2011年6月', '2011年7月', '2011年8月', '2011年9月', '2011年10月', '2011年11月'],
rotation: -45,
//逆时针旋转45°，标签名称太长。
align: 'right'
//设置右对齐
yAxis: [{ //设置Y轴-第一个（增幅）
formatter: function() { //格式化标签名称
return this.value + '%';
color: '#89A54E' //设置标签颜色
title: {text: ''}, //Y轴标题设为空
opposite: true
//显示在Y轴右侧，通常为false时，左边显示Y轴，下边显示X轴
{ //设置Y轴-第二个（金额）
gridLineWidth: 0,
//设置网格宽度为0，因为第一个Y轴默认了网格宽度为1
title: {text: ''},//Y轴标题设为空
formatter: function() {//格式化标签名称
return this.value + ' 万亿元';
color: '#4572A7' //设置标签颜色
tooltip: { //鼠标滑向数据区显示的提示框
formatter: function() {
//格式化提示框信息
var unit = {
'金额': '亿元',
'增幅': '%'
} [this.series.name];
return '' + this.x + ': ' + this.y + ' ' +
legend: { //设置图例
layout: 'vertical', //水平排列图例
shadow: true,
//设置阴影
series: [{
name: '金额',
color: '#4572A7',
type: 'column', //类型：纵向柱状图
yAxis: 1, //数据列关联到Y轴，默认是0，设置为1表示关联上述第二个Y轴即金额
data: [75.55, 19.15, 13.69, 599.64,
1, 68, 49.92, 018.55, 396.18] //金额数据
name: '增幅',
color: '#89A54E',
type: 'spline', //类型：曲线图
data: [18.3, 9.8, 25.6, 26.8, 16.6, 35.4, 38.5, 66.9, -10.4, 27.8, 31.0, 42.9,
33.1, 19.6, 25.9, 18.3, 24.5,7.5] //增幅数据
2、各学院毕业生男女比例分布图
前面的例子我们都使用的是静态数据，本例中，我想通过PHP来读取mysql数据表中的数据，然后处理给Highcharts生成一个男女比例分布图。
首先，设计一张简单的表chart_student，用来存储各学院的男生女生人数。
然后，连接mysql表，读取数据：
include_once('connect.php'); //连接数据库文件
$res = mysql_query("select * from chart_student"); //查询读取chart_student
while($row = mysql_fetch_array($res)){ //循环结果集
$college[] = $row['college'];
//获取学院名称
$male[] = intval($row['male']);
//获取男生人数，并转换为数字整型
$female[] = intval($row['female']); //获取女生人数，并转换为数字整型
本例将要通过Highcharts生成一个横向柱状图，Y轴表示学院，X轴表示各学院男女比例分布。通过上述PHP代码获取学院名称作为Y轴标签，获取各学院男生和女生数作为X轴计算比例。
接下来配置Highcharts，请看代码和注释：
$(function() {
chart = new Highcharts.Chart({
renderTo: 'chart_bar',
//图表放置的容器，关联DIV#id
defaultSeriesType: 'bar'
//图标类型为bar，即横向柱状条形统计图
text: '2011届毕业生各学院男女比例分布图'
//设置图表标题
xAxis: { //设置X轴
categories: &?php echo json_encode($college); ?&
//通过PHP将读取的学院名称以JSON格式输出
yAxis: { //设置Y轴
//最小值为0
title: {text: ''}
plotOptions: { //设置数据点
stacking: 'percent'
//数据点关联组合，采用百分比形式
series: [{
name: '男生',
data: &?php echo json_encode($male);?&
//通过PHP将读取的各学院男生人数并以JSON格式输出
name: '女生',
data: &?php echo json_encode($female);?& //通过PHP将读取的各学院女生人数并以JSON格式输出
(责任编辑：鸟嘌呤)
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
博斯互联旗下
售前咨询QQ：&技术咨询QQ：
1000人站长交流QQ群: 496058
电话：028- 传真：028- 客服中心信箱：yopoing@
博斯公告：博斯互联是西部数码伙伴级核心代理商，全场八折起优惠更有礼品相送，支持淘宝购买更有保障，同时我们也是万网、阿里云、新网、云龙科技和红色主机等知名IDC品牌的合作伙伴，致力于为客户提供完整的互联网应用服务，服务范围涵盖基础的域名服务、虚拟主机、企业邮箱、网站建设、网络营销等应用服务，我们的宗旨是搜集天下优质主机资源，每一个主机都精心挑选和测试，保证主机速度和稳定性，让客户无忧。
特别提示：买西部数码虚拟主机，找博斯互联！价格低、服务好、有保障！另增送20%空间，买1年还送30天（国内），超值！！！