如何在用户单击时确定条形图(Highchart）中条形的值

How to I determine the value of a bar in a bar chart (Highchart) on user click?

本文关键字：Highchart 条形图 用户 单击      更新时间：2023-09-26

目前我有一个Highchart，它根据数据库中的数据进行渲染。我目前还有一个表，当我手动传入"A"或"C"等值时，它会使用正确的值进行渲染，但我希望当用户单击我的 Highchart 中的条形时，该表根据 onClick 事件呈现。

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

我用谷歌搜索过，但没有太多运气。我想知道当用户单击该特定栏时，我如何获取字符中栏的值。

任何帮助将不胜感激。 

<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"函数来启用特定的数据系列。

相关文章：