高位图表单击列(而非条形图）

Highcharts click on column (not bar)

本文关键字：条形图 表单 位图 高位图 单击      更新时间：2023-09-26

我有一个像这样的Highcharts图表：http://jsfiddle.net/tasrgpqL/

在"plotOptions"中，我添加了一个单击事件，当单击其中一个条形图时会触发警报。但现在我想为整个列添加一个点击事件，而不仅仅是条形图。我该怎么做？

plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0,
            point:{
              events:{
                click: function(event) {
                  alert('test');
                }
              }
            }
        },
    },

您需要在图表选项中添加点击事件：

 chart: {
    events: {
       click: function (event) {
          alert("clicked column");
       }
    },

这是FIDDLE

为了获得点击列的数据，我使用了如下PHP：

// Convert PHP array to JSON object
var subjects = <?php echo json_encode($subjects); ?>
$('#chart').highcharts({
    chart: {
        events:{
            click: function(event) {
                // Get clicked column by looking for rounded click posistion of x-axis in JSON object
                var column = Math.abs(Math.round(event.xAxis[0].value));
                var id = subjects[column];
            }
        }
    },
    xAxis: {
        categories: [
            // Create JSON by looping through array
            <?php foreach($subjects as $subject): ?>
                {name: '<?=$subject['name']?>', y: 1, id: <?=$subject['id']?>},
            <?php endforeach; ?>
        ]
    }
});

我知道这有点难看，但我还没有找到其他办法。

相关文章：