3

ハイチャートの縦棒グラフをドリルダウンしたい。それぞれに少なくとも 20 個の x 軸ラベルがある 3 レベルのドリル ダウンがあります。現在、列のクリックに対してドリル ダウンが機能しています。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 ラベルで機能しますが、すべてでは機能しません。これは、すべてのラベルの 3 つのレベルすべてで、ラベルのドリルダウンが機能しない@このフィドルを見ることができます。

また、参照用にハイチャートフォーラムで作成した投稿を次に示します

4

1 に答える 1

2

チャートの読み込み時にハンドラーを追加しています。その時点で一部の軸ラベルが存在しないため、それらのラベルはクリック イベントに応答しません。

迅速な (読み取りダーティな) 修正として、ロード用に持っているものと同じハンドラーを再描画に追加できるため、作成された新しいラベルがそれにバインドされます。

同じ関数を redraw イベントにバインドできます (これは 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 
    },
    ...
 }

x 軸ラベル @ jsFiddle からドリルダウンする

于 2012-09-19T13:04:03.713 に答える