如何在用户点击时确定条形图（Highchart）中条形的值？

目前我有一个根据我的数据库中的数据呈现的Highchart。我现在也有一个表格，当我手动传递一个如“A”或“C”的值时，使用正确的值呈现，但我希望表格根据onClick事件渲染，当用户单击酒吧在我的Highchart。如何在用户点击时确定条形图（Highchart）中条形的值？

对于下面的每个对应的值，例如@a_sum，我有一个名为@a的数组，其中的字符串值将被传递到图表中。

我谷歌搜索没有太多的运气。我想知道当用户点击特定的栏时，我如何获得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>

来源

2012-07-02 Zack Shapiro

“但我希望表格根据onClick事件呈现，当用户点击我的海图中的一个栏时。” - 你能详细解释一下这个问题吗？我不确定我是否理解。你的意思是你想基于onclick事件渲染另一个表格吗？ – yuklai

当然，@fatshu我已经准备好了表，它会根据图表中选定的实例变量填充其值。目前，除非手动更改代码，否则它不会更改其值，我希望表中的内容根据用户在图表中单击的栏来更改。这是否更有意义？ –

下面的解决方案是否适合您？只是好奇。 – yuklai

好像你想要什么（如果我理解你正确的问题是）以实现上述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

有了这个系列，你应该能够得到系列的参数，点击你的列，然后调用你的“enabl eTableForDataSeries“功能来启用特定的数据系列。

来源

2012-07-03 05:41:23 yuklai

这工作得很好。谢谢Fatshu！ –

很高兴知道！谢谢！ – yuklai

如何在用户点击时确定条形图（Highchart）中条形的值？

回答

相关问题