2014-01-12 2 views
0

레이블이 -45도 회전 된 하이 차트 열 차트가 있습니다. 라벨을 -90도까지 회전시키고 싶지만 그렇게하면 바가 사라집니다! 바이올린 : http://jsfiddle.net/Snowbell92/LMEve/ (이 라벨은 -90도까지 회전 된 라벨을가집니다). 코드 :이 별개의 문제이지만, 다양한 차트 100 %가되지 않습니다 탭 (I 트위터 부트 스트랩 탭을 사용하고 있습니다) 내부의 차트를 구현하는 경우하이 차트 레이블 회전으로 인해 내 열이 사라집니다

$(function() { 
    $('#closingvolumechart').highcharts({ 
     chart: { 
      type: 'column', 

     }, 
     title: { 
      text: 'Fuel & Power Industry' 
     }, 
     xAxis: { 
      categories: ["EXIM BANK 1ST MUTUAL FUND","NLI FIRST MUTUAL FUND","AIBL 1ST ISLAMIC MUTUAL FUND","6TH ICB M.F.","GRAMEEN MUTUAL FUND ONE","AB BANK 1ST MUTUAL FUND","NCCBL MUTUAL FUND-1","ICB AMCL SECOND MUTUAL FUND","5TH ICB M.F.","TRUST BANK 1ST MUTUAL FUND","FIRST BANGLADESH FIXED INCOME FUND","IFIC BANK 1ST MUTUAL FUND","4TH ICB M.F.","7TH ICB M.F.","POPULAR LIFE FIRST MUTUAL FUND","LR GLOBAL BANGLADESH MUTUAL FUND ONE","ICB AMCL THIRD NRB MUTUAL FUND","FIRST JANATA BANK MUTUAL FUND","AIMS 1ST M.F.","DBH FIRST MUTUAL FUND","GRAMEEN ONE : SCHEME TWO","RELIANCE ONE THE 1ST SCHEME OF RELIANCE INSURANCE MUTUAL FUN","IFIL ISLAMIC MUTUAL FUND-1","ICB AMCL 1ST NRB MUTUAL FUND","PHP FIRST MUTUAL FUND","PRIME BANK 1ST ICB AMCL MUTUAL FUND","2ND ICB M.F.","ICB AMCL ISLAMIC MUTUAL FUND","8TH ICB M.F.","1ST ICB M.F.","ICB AMCL SONALI BANK LIMITED 1ST MUTUAL FUND","SOUTHEAST BANK 1ST MUTUAL FUND","PRIME FINANCE FIRST MUTUAL FUND","EBL FIRST MUTUAL FUND","EBL NRB MUTUAL FUND","3RD ICB M.F.","ICB EMPLOYEES PROVIDENT MF 1: SCHEME 1","MBL 1ST MUTUAL FUND","GREEN DELTA MUTUAL FUND","PHOENIX FINANCE 1ST MUTUAL FUND","ICB AMCL 2ND NRB MUTUAL FUND"], 
      labels: { 
       rotation: -90, 
       align: 'right', 
       style: { 
        fontSize: '10px', 
        fontFamily: 'Verdana, sans-serif' 
       } 
      } 
     }, 
     plotOptions: { 
     series: { 
        minPointLength: 8, 
      borderColor: '#f2f2f2', 
      borderWidth: 2, 
      shadow: true, 
     } 
    }, 
    credits: { 
      enabled: false 
}, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Volume' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     column: { dataLabels: { 
        enabled: true, 
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
        verticalAlign: 'top' 

       } 

      }, 
     series: [{ 
      name: 'Volume', 
      data: [530,536,539,573,574,591,597,614,614,631,633,681,706,708,719,751,752,755,758,771,782,838,857,870,876,877,897,905,929,934,941,957,990,996,999,1005,1023,1023,1029,1052,1059], 
      color: '#008000', 
     }] 
    }); 
}); 

은 또한, 나는 모른다. 오직 방화범을 발동 할 때만 차트가 확장됩니다. URL : http://goo.gl/X3sNVq, "그래프의 주가 표시"탭을 클릭 한 다음 "활성 가격"(활성 탭)을 참조하십시오. 차트는 위와 동일합니다. 나는 정말 어떤 도움을 주셔서 감사합니다. 미리 감사드립니다.

답변

1

차트의 높이를 높이기 만하면됩니다. x 축 레이블이 길기 때문에 차트는 막대 차트를 그릴 수 없습니다. 높이를 600px로 늘 렸습니다. here

+0

완벽하게 작동

<div id="closingvolumechart" style="height: 600px"></div> 

참조 데모! 고마워요 !! 탭에서 너비 문제를 일으키는 버그를 찾았습니까? –

+0

'closingpricechart' 스타일을'width : 100 %'또는 px 스타일로 사용해보십시오. –

관련 문제