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

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

1 个答案: