将事件添加到条形图的 X 轴标签
add event to x-axis labels of bar highchart
我正在尝试通过单击字符 x 轴上的标签文本来检索它。我正在使用条形图,代码如下:
var chart = new Highcharts.Chart({
chart: {
type: 'column',
backgroundColor: '#eaedf1',
zoomType: 'x',
renderTo: 'container'
},
plotOptions: {
series: {
cursor: 'pointer',
pointWidth: 10,
point: {
events: {
click: function (event) {
console.log(event.point.name + " " + this.y);
}
}
}
}
},
title: {
text: 'Total Flow Types'
},
xAxis: {
type: 'category',
labels: {
rotation: -90
}
},
yAxis: {
min: 0,
title: {
text: 'millions'
}
},
legend: {
enabled: false
},
series: [{
name: 'Flow Types'
}]
});
然后通过单击一个按钮,图表将使用 ajax 填充,它工作正常。通过检查图表的dom,我看到每个标签都是文本/文本。它们是g/元素的一部分,具有类highcharts-axis-labels highcharts-xaxis-labels。所以我尝试使用 jquery 检索值,如下所示:
$('body').on('click', 'g.highcharts-axis-labels.highcharts-xaxis-labels text', function () {
console.log($(this).text());
});
或者只是
$('body').on('click', 'text', function () {
console.log($(this).text());
});
这一切都是document.ready函数的一部分。不幸的是,这些都无法检索 x 轴标签的文本?
而不是:
$('body').on('click', 'g.highcharts-axis-labels.highcharts-xaxis-labels text', function () {
console.log($(this).text());
});
使用这个:
$('.highcharts-xaxis-labels text').on('click', function () {
console.log($(this).text());
});
不应使用dot
连接类highcharts-axis-labels
和highcharts-xaxis-labels
。而且类highcharts-xaxis-labels
也足以添加事件。这是小提琴:http://jsfiddle.net/8sxLr5j8/
您可以使用允许这样做的扩展。
相关文章:
- Chart.js条形图:网格颜色和隐藏标签
- 如何在Extjs5中更改条形图的标签
- Chart.js条形图标签在悬停时被隐藏
- ZingCharts水平堆叠条形图X轴标签被切断
- 堆积条形图标签-D3
- 在每个条形图的中间添加文本标签&鼠标悬停事件
- gRaphaël-带标签和日期的条形图示例
- 更新条形图并删除标签
- D3 垂直条形图为标签文本添加换行符
- Highcharts 单个水平堆叠条形图,始终显示数据名称(标签)和 %-年龄,并在鼠标悬停时显示数据编号和系列名称
- 剑道条形图类别标签基于值的左右
- D3JS 条形图:如何允许重复的 x 轴标签值
- 在堆叠条形图上显示标签
- 将事件添加到条形图的 X 轴标签
- 有没有办法防止 xaxis 标签在 flot.js 条形图中重叠
- 高图表 - 无法在条形图上看到所有标签
- D3堆积条形图添加数据标签并解决D3标签放置问题
- MPLD3:条形图的标签信息
- 在高图表水平条形图中显示所有标签
- 高图表条形图:可以在数据标签内组合数据点