如何在用戶點擊時確定條形圖（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）中條形的值？

回答

相關問題