3

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

根据我的研究，我发现了这个可能的解决方案。点击 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-labels 但不是全部。这可以看出@this fiddle标签钻取不适用于所有标签的所有 3 个级别。

另外，这是我在highchart论坛上发表的帖子以供参考

4

1 回答 1

2

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

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

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

 $(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 
    },
    ...
 }

从 x 轴标签向下钻取 @ jsFiddle

于 2012-09-19T13:04:03.713 回答