![](/img/trans.png)
[英]How to open new chart to the adjacent <div> on bar click in highchart
[英]How to I determine the value of a bar in a bar chart (Highchart) on user click?
目前,我有一個Highchart,可以根據數據庫中的數據進行渲染。 我目前還擁有一個表,當我手動傳遞諸如“ A”或“ C”之類的值時,該表將顯示正確的值,但是我希望該表根據onClick事件(當用戶單擊一個我的Highchart中的酒吧。
對於下面的每個對應值,例如@a_sum,我有一個名為@a的數組,其中包含字符串值,該數組將傳遞到圖表中。
我在Google周圍沒有很多運氣。 我想知道當用戶單擊特定欄時如何獲得char中的欄值。
任何幫助將不勝感激。
<script type="text/javascript" charset="utf-8">
var chart1; // globally available
$(document).ready(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title : {
text: "Most Effective Referral Sources"
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L']
},
yAxis: {
},
legend: {
layout: 'vertical',
floating: true,
backgroundColor: '#FFFFFF',
align: 'right',
verticalAlign: 'top',
y: 60,
x: -60
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
plotOptions: {
},
series: [{
data: [<%= @a_sum %>, <%= @b_sum %>, <%= @c_sum %>, <%= @d_sum %>, <%= @e_sum %>, <%= @f_sum %>, <%= @g_sum %>, <%= @h_sum %>, <%= @i_sum %>, <%= @j_sum %>, <%= @k_sum %>, <%= @l_sum %>]
}]
});
});
</script>
似乎您想要的(如果我理解正確的話)是在上述plotOptions中實現該事件: http ://www.highcharts.com/ref/#plotOptions-column-point-events--click
plotOptions: {
column: {
point: {
events: {
click: function() {
// use this to trigger showing/hiding the specific table you need
console.log(this)
}
}
}
}
}
例如,這是我得到的控制台日志的示例:
Lc
_high: 417
...
series: c
...
x: 20
y: 33
__proto__: Object
使用this.series,您應該能夠獲得其單擊列的系列的參數,然后調用“ enableTableForDataSeries”函數來啟用特定的數據系列。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.