Question

我想深入了解highcharts中的柱形图。我有一个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供参考

Answer 1

您正在图表加载时添加处理程序，此时某些轴标签将不会出现，因此这些标签不会响应点击事件

作为快速（读取脏）修复，您可以将相同的处理程序添加到重绘中，因此创建的新标签将绑定到它。

您可以将相同的功能绑定到重绘（当x轴标签也被更改时也会发生这种情况，您可以使用不太适合需要的事件替换）事件，因此每次重绘图表时都会解除绑定（因为我不确定高图中标签的生命周期，如果现有标签被重新用于新钻取的下图，则删除更安全）任何现有的点击处理程序，如下每个刻度

 $(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

单击x轴上的高图列向下钻取图表上的点击事件以查找深入报表

1 个答案: