0

我正在构建包含图表的仪表板页面（同样使用 HighCharts）。我的 html 还包含 jQuery 选项卡。

在一个选项卡中有 4 个不同的图表。图表正在正确加载，但它带有垂直滚动条。作为仪表板页面，我想隐藏垂直滚动条。

这是我的 HTML

 <div id="container" style="width:98%;">
        <ul>
            <li><a href="#divP1">Dashboard</a></li>
            <li><a href="#divP2">Network</a></li>
            <li><a href="#divP3">> 24 Hours</a></li>            
        </ul>
        <div id="divP1" style="margin:0 auto;">
            <div id="divDailyUptimeLineChart" style="width:650px;height:250px;float:left;"></div>
            <div style="width:500px;height:250px;margin-left:750px;" id="divUptimeGauge"></div>
            <br />
            <div style="clear:both;width:700px;float:left;" id="divFaultCount"></div>
            <div style="margin-left:700px;" id="divTicketTypeCount"></div>
            <br />            
        </div>      
        <div id="divP2" style="margin:0 auto;">
            <div id="divFaultTicketType" style="width:49%;float:left;" ></div>            
            <div id="divCRATicketType" style="margin-left:49%;width:49%"></div>
        </div>  
        <div id="divP3" style="margin:0 auto;">
            <div id="divTicketTypeTime"></div>
        </div>
    </div>

HighCharts 呈现divDailyUptimeLineChart divUptimeGauge divFaultCount divTicketTypeCount在第一个选项卡上

JS：

$('#container').tabs();

我在我的 HighCharts 定义代码中尝试了这个代码：但它没有用

chart: {
        renderTo: divID,
        type: 'gauge',
        height: $(document).height()/2,
        width: $(document).width()/2,
        },
4

5 回答 5

2

赋予样式overflow-y : hidden以隐藏垂直滚动条。

于 2013-08-21T08:57:55.920 回答
2

尝试将此添加到每个包含图表的 div 的样式中：

overflow-y: hidden;

因此，例如 divDailyUptimeLineChart 将如下所示：

<div id="divDailyUptimeLineChart" style="width:650px;height:250px;float:left;overflow-y:hidden;"></div>
于 2013-08-21T08:58:14.353 回答
1

首先要隐藏 div 的溢出，您应该减小 div 的宽度并将内容放置在里面。

否则你可以使用

overflow-y:hidden;

这将隐藏超出的内容。当想要显示 div 的全部内容时，这将是一个主要缺点。

尝试调整选项卡容器的宽度。使选项卡不会超过预期的大小....

我建议您阅读本文以了解有关溢出属性的更多信息。

于 2013-08-21T09:08:11.360 回答
1

试试这个代码

JS：

$("div").css('overflow-y','hidden');

内部风格：

    div
    {
    overflow: auto; 
    overflow-y: hidden;    
    //For IE8: 
    -ms-overflow-y: hidden;    
    }

欲了解更多信息

于 2013-08-21T09:05:28.223 回答
0

您可能正在寻找的是 css 中的溢出属性...查看您的 css 文件并找到类似的内容：

div {
overflow: auto;
}

您想将溢出属性设置为隐藏...有关更多信息，请查看此链接

于 2013-08-21T08:58:11.823 回答