Highstocks 图表宽度未正确呈现

Question

您好，我在使用 jquery 选项卡时遇到 highstocks 问题。

这是构造函数的代码。

Chart = new Highcharts.StockChart({  
        Chart = new Highcharts.StockChart({
        chart: {
            renderTo: 
                'Container',
                 alignticks:false
             },
        xAxis: { .......... },
        yAxis: [{ ....... }],
        series : [{ .......... }]
    });

容器只有整个页面宽度的一半。

当页面加载到包含图形的选项卡时，其宽度将正确呈现。 但是，当页面首先加载到另一个选项卡时，其宽度跨越页面的整个宽度，与页面上的其他内容重叠。因此，必须刷新页面才能解决此问题。

有人有解决办法吗？

Answer 1

您还可以触发 window.resize 事件

$(window).trigger('resize');

，并且 Highcharts 应该更新图表大小

Answer 2

Highcharts 将图表的宽度设置为包含元素的宽度。因此，如果包含元素被隐藏，它就无法获得宽度。

要解决此问题，您可以在初始化图表时设置宽度选项：

Chart = new Highcharts.StockChart({  
    Chart = new Highcharts.StockChart({
    chart: {
          renderTo: ...,
          width: <SOME WIDTH>
        },
    xAxis: { .......... },
    yAxis: [{ ....... }],
    series : [{ .......... }]
});

如果您无法将图表设置为正确的宽度，我使用此技巧来获取隐藏元素的宽度：

jQuery：获取 jQuery 中隐藏元素的高度

Answer 3

我知道您提出问题已经有一段时间了，但我遇到了类似的问题，每当图表位于默认情况下未激活的选项卡上时，我的图表就会以零宽度在客户端上呈现。这是因为，正如 @brent 所指出的，highcharts 使用父级的宽度，并且从 jQuery UI 1.9 开始，选项卡小部件使用 display: none 的内联样式来隐藏非活动选项卡。

您应该使用图表所在选项卡的 activate 事件，而不是使用 jQuery 的文档就绪事件来初始化 highchart。这样做的另一个好处是，每次用户单击选项卡时都会执行时髦的图表动画。

代替：

$(document).ready(function() { 
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});​

使用：

$('#tabcontainer').on('tabsactivate', function (event, ui) { 
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});​

Answer 4

您可以使用百分比设置图表容器 div 的宽度。

像这样的东西应该有效。

<div id = "tab1"> 
  <div id="graphContainer1" style= "width: 90%"></div>
</div>
<div id = "tab2" style = "display:none"> 
  <div id="graphContainer2" style= "width: 60%"></div>
</div>

Answer 5

在样式表中，将类选择器 .ui-tabs .ui-tabs-hide 的规则替换为

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

以下解决方案：jQuery UI - 选项卡