HighCharts和idTabs - 圖表寬度設置不正確

我有一個安裝了HighCharts和idTabs插件的網頁。我只想在時間顯示1個圖表，所以您好在多個選項卡中。 HTML代碼是：HighCharts和idTabs - 圖表寬度設置不正確

<ul class="idTabs"> 
    <li><a href="#vpPointsGraphWrapper">Points</a></li> 
    <li><a href="#vpKillsDeathsGraphWrapper">Kills and deaths</a></li> 
    <li><a href="#vpDamageGraphWrapper">Damage</a></li> 
    <li><a href="#vpBombsGraphWrapper">Bombs</a></li> 
</ul> 
<div id="vpPointsGraphWrapper"><div id="vpPointsGraph"></div></div> 
<div id="vpKillsDeathsGraphWrapper"><div id="vpKillsDeathsGraph"></div></div> 
<div id="vpDamageGraphWrapper"><div id="vpDamageGraph"></div></div> 
<div id="vpBombsGraphWrapper"><div id="vpBombsGraph"></div></div>

直到此時是所有好，圖表有自己的數據，一切都好，除了一兩件事，寬度。默認情況下顯示的圖表（vpPointsGraph）具有正確的寬度（包含它們的div的100％），但其他圖形取對應於監視器寬度的寬度，溢出包裝div。我認爲問題在於他們想要獲得包裝div寬度，但是因爲它隱藏了它們，所以會佔用整個屏幕寬度。有沒有什麼辦法解決這一問題？感謝您的回答。

編輯：我解決了，檢查下一個答案的解釋。

來源

2014-02-27 nnRg

你能重現你的例子作爲現場演示嗎？ –

我已修復它，我將該解決方案作爲答案進行了補充。不管怎麼說，還是要謝謝你。 – nnRg

解決方案：http://jsfiddle.net/5kLdG/ 我所做的只是獲得容器的寬度，我希望圖表適合並將其設置在highcharts'width'參數中。我不知道它是否是最好的解決方案，但它對我有用。

//Get wrapper width 
var width = $('#wrapper').width() 
//Points Graph 
     var pointsChart = new Highcharts.Chart({ 
      chart: { 
     renderTo: 'vpPointsGraph', 
       type: 'line' 
      }, 
      title: { 
       text: 'Points' 
      }, 
      xAxis: { 
       title: { 
        text: 'Match' 
       }, 
       categories: [1,2,3,4,5,6,7], 
     reversed: true 
      }, 
      yAxis: { 
       title: { 
        text: 'Points' 
       }, 
      }, 
      tooltip: { 
       crosshairs: true, 
       shared: true, 
       valueSuffix: '' 
      }, 
      plotOptions: { 
       line: { 
        marker: { 
         radius: 4, 
         lineColor: '#666666', 
         lineWidth: 1 
        } 
       } 
      }, 
    credits: { 
       enabled: false 
      }, 
      series: [{ 
       name: 'Points', 
       data: [5,6,7,8,3,6,8] 
      }] 
     }); 


//KillsDeaths Graph 
     var killsDeathsChart = new Highcharts.Chart({ 
      chart: { 
     renderTo: 'vpKillsDeathsGraph', 
       type: 'line', 
     width: width 
      }, 
      title: { 
       text: 'Kills and Deaths per match' 
      }, 
      xAxis: { 
       title: { 
        text: 'Match' 
       }, 
       categories: [1,2,3,4,5], 
       reversed: true 
      }, 
      yAxis: { 
       title: { 
        text: 'Number' 
       }, 
      }, 
      tooltip: { 
       crosshairs: true, 
       shared: true, 
       valueSuffix: '' 
      }, 
      plotOptions: { 
       line: { 
        marker: { 
         radius: 4, 
         lineColor: '#666666', 
         lineWidth: 1 
        } 
       } 
      }, 
    credits: { 
       enabled: false 
      }, 
      series: [{ 
       name: 'Kills', 
       data: [6,8,2,2,5] 
      }] 
     });

來源

2014-02-28 13:49:09 nnRg

HighCharts和idTabs - 圖表寬度設置不正確

回答

相關問題