Question

你好我使用jquery选项卡时遇到highstocks的问题。

这是构造函数的代码。

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

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

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

有没有人有解决方案？

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: Get height of hidden element in jQuery

希望这有帮助。

Answer 3

我知道这是你提出问题后的很长一段时间，但我有一个类似的问题，因为我的图表在客户端呈现零宽度，只要图表在默认情况下未激活的选项卡上。这是因为，正如@brent指出的那样，highcharts使用父级的宽度，并且从jQuery UI 1.9开始，选项卡小部件使用内联样式display: none来隐藏非活动选项卡。

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

而不是：

$(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 - Tabs

未正确呈现Highstocks图形宽度

5 个答案: