javascript - HighCharts 和 idTabs - 图表宽度设置不正确

Question

我有一个安装了 HighCharts 和 idTabs 插件的网页。我只想一次显示 1 个图表，所以你好，他们在多个选项卡中。 html代码是:

<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 的宽度，但由于它是隐藏的，所以它们占用了整个屏幕宽度。有没有什么办法解决这一问题？ 感谢您的回答。

编辑:我解决了，查看下一个答案的解释。

Answer 1

解决方案:http://jsfiddle.net/5kLdG/ 我所做的只是获取我希望图表适合的容器的宽度，并将其设置在 highcharts 的“宽度”参数中。我不知道这是否是最佳解决方案，但它对我有用。

//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]
            }]
        });