php - 单击x轴以进行向下钻取报告时，在highchart列的向下钻取图表上触发点击事件

我想在海图中深入查看柱形图。我有一个3级向下钻取，每个至少有20个x轴标签。现在向下钻取可用于单击列。我想在x轴单击上做同样的事情。

根据我的研究，我发现this probable solution。单击x轴标签，可以看到我要实现的目标。

我用来实现此功能的功能

function(chart) {

   //console.log(chart.xAxis[0].ticks[0]);
   $.each(chart.xAxis[0].ticks, function(i, tick) {
       tick.label.on('click', function() {
           var drilldown = chart.series[0].data[i].drilldown;
           if (drilldown) { // drill down
               chart.setTitle({
                   text: drilldown.name
               });
               setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.level , drilldown.ytitle);

           } else { // restore
               setChart(name, categories, data, null, level , 'Total Agent score');
               chart.setTitle({text: "Agent Performance Drill Down Report"});

               chart.setTitle(undefined, { text: 'Click the Columns to view Drill Down Reports.' });
           }
       });
   });

}

问题:它适用于大多数x标签，但不是全部。 @ this fiddle可以看到，标签下钻在所有标签上的所有3个级别上均无效。

另外，这是post I made on highchart forum供引用

最佳答案

您将在图表加载时添加处理程序，此时某些轴标签将不存在，因此这些标签将不会对click事件做出响应

作为快速修复(读取为肮脏)，您可以将与加载相同的处理程序添加到重绘，因此创建的新标签将绑定(bind)到该重绘器。

您可以将相同的功能绑定(bind)到重绘(这也发生在x轴标签也发生更改时，您也可以用一个也不需要的频率较低的事件进行替换)事件，因此，每次重绘图表时都取消绑定(bind)(因为我无法确定图表中标签的生命周期，如果将现有标签重新用于新的向下钻取图表，则可以更安全地删除任何现有的单击处理程序，如下所示:

 $(tick.label.element).unbind('click');

然后添加点击处理程序

var bindAxisClick = function() {
    $.each(this.xAxis[0].ticks, function(i, tick) {
        $(tick.label.element).unbind('click');
        $(tick.label.element).click(function() {
            var drilldown = chart.series[0].data[i].drilldown;
            if (drilldown) { // drill down
                chart.setTitle({
                    text: drilldown.name
                });
                setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.level, drilldown.ytitle);

            } else { // restore
                setChart(name, categories, data, null, level, 'Total score');
                chart.setTitle({
                    text: "Drill Down Report"
                });

                chart.setTitle(undefined, {
                    text: 'Click the Columns to view Drill Down Reports.'
                });
            }
        });
    });
};

修改图表选项以添加重绘和加载处理程序

chart :{
    ...
    events: {
            redraw: bindAxisClick ,
            load:bindAxisClick
    },
    ...
 }

Dril down from x-axis labels @ jsFiddle

关于php - 单击x轴以进行向下钻取报告时，在highchart列的向下钻取图表上触发点击事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12494560/