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

【问题标题】：HighCharts and idTabs - Charts width not setting properlyHighCharts 和 idTabs - 图表宽度设置不正确
【发布时间】：2014-02-28 21:49:54
【问题描述】：

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

编辑：我解决了，查看下一个答案以获得解释。

【问题讨论】：

您能否将您的示例重现为现场演示？
我已修复它，我将解决方案作为答案。无论如何，谢谢。

标签： javascript html css highcharts idtabs

【解决方案1】：

解决方案：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]
            }]
        });

【讨论】：