2016-10-10 3 views
1

私はHighcharts Stacked列を使用していますが、項目が空の場合はドリルダウンリンクを削除する必要があります。ハイチャート - 空のアイテムのドリルダウンリンクを削除するにはどうすればよいですか?

前提条件:

  • 使用値0またはnull、それはチャート列をソートする必要がありますので、いくつかの項目は空です。
  • 一部の列にはドリルダウンがあり、その他の列はデータに依存しません。

jsfiddle例を参照してください: http://jsfiddle.net/tsenffor/

再現する方法:グラフの下

  • を、 "CCC" のラベルをオフにします。
  • 「名前4列」には値はありませんが、ドリルダウンリンクが有効であることに注意してください。下の画像を参照してください。

enter image description here

可能な場合は空の列を非表示にし、私はまだ列がソートので、この値は、コードに0またはnullを設定する必要があります。

Find the related columns sorting issue here.

$(function() { 
 
    $('#container').highcharts({ 
 
     chart: { 
 
      type: 'column' 
 
     }, 
 
     title: { 
 
      text: 'Stacked column chart' 
 
     }, 
 
     xAxis: { 
 
      type: 'category' 
 
     }, 
 
     yAxis: { 
 
      min: 0, 
 
      title: { 
 
       text: 'Highchart test' 
 
      }, 
 
      stackLabels: { 
 
       enabled: true, 
 
       style: { 
 
       \t fontWeight: 'bold' 
 
      \t } 
 
      } 
 
     }, 
 
     legend: { 
 
      enabled: true 
 
     }, 
 
     plotOptions: { 
 
      series: { 
 
       stacking: 'normal' 
 
      } 
 
     }, 
 
     series: [{ 
 
      name: 'AAA', 
 
      data: [{ 
 
       name: 'Name 1', 
 
       y: 5, 
 
       drilldown: 'Name1AAA' 
 
      }, { 
 
       name: 'Name 4', 
 
       y: 0 
 
      }, { 
 
       name: 'Name 3', 
 
       y: 2 
 
      }, { 
 
       name: 'Name 2', 
 
       y: 2 
 
      }] 
 
     }, { 
 
      name: 'BBB', 
 
      data: [{ 
 
       name: 'Name 1', 
 
       y: 10, 
 
       drilldown: 'Name1BBB' 
 
      }, { 
 
       name: 'Name 4', 
 
       y: 0 
 
      }, { 
 
       name: 'Name 3', 
 
       y: 0 
 
      }, { 
 
       name: 'Name 2', 
 
       y: 5 
 
      }] 
 
     }, { 
 
      name: 'CCC', 
 
      data: [{ 
 
       name: 'Name 1', 
 
       y: 4, 
 
       drilldown: 'Name1CCC' 
 
      }, { 
 
       name: 'Name 4', 
 
       y: 12, 
 
       drilldown: 'Name4CCC' 
 
      }, { 
 
       name: 'Name 3', 
 
       y: 8 
 
      }, { 
 
       name: 'Name 2', 
 
       y: 1 
 
      }] 
 
     }], 
 
     
 
     drilldown: { 
 
      series: [{ 
 
       name: 'Name 1 - AAA', 
 
       id: 'Name1AAA', 
 
       data: [ 
 
        ['Name 1/1', 2], 
 
        ['Name 1/2', 2], 
 
        ['Name 1/3', 1], 
 
       ] 
 
      }, { 
 
       name: 'Name 1 - BBB', 
 
       id: 'Name1BBB', 
 
       data: [ 
 
        ['Name 1/1', 7], 
 
        ['Name 1/2', 2], 
 
        ['Name 1/3', 1], 
 
       ] 
 
      }, { 
 
       name: 'Name 1 - CCC', 
 
       id: 'Name1CCC', 
 
       data: [ 
 
        ['Name 1/1', 2], 
 
        ['Name 1/2', 3], 
 
        ['Name 1/3', 4], 
 
       ] 
 
      }, { 
 
       name: 'Name 4 - CCC', 
 
       id: 'Name4CCC', 
 
       data: [ 
 
        ['Name 4/1', 4], 
 
        ['Name 4/2', 5], 
 
        ['Name 4/3', 3], 
 
       ] 
 
      }] 
 
     } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 
<script src="http://github.highcharts.com/modules/drilldown.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

はこれを行う方法はありますか?

ありがとうございます!

+0

は、あなただけのドリルダウンオプションを削除できませんでしたか?それともあなたがやろうとしていることはありませんか?ドリルダウンを削除すると「Name1CCC」の – Duniyadnd

+0

が削除されます。 – Danielle

答えて

-1

これを使用し、x軸ラベルのリンクを削除するには、次の

Highcharts.Tick.prototype.drillable = function() {}; 

はこれを見て:

http://jsfiddle.net/tsenffor/3/

関連する問題