未正确呈现Highstocks图形宽度

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:在jQuery中获取隐藏元素的高度

希望这可以帮助.

Answer 3

我知道这是你提出问题后的很长一段时间,但我有类似的问题,因为我的图表在客户端呈现零宽度,只要图表在默认情况下未激活的选项卡上.这是因为,正如@brent指出的那样,highcharts使用父级的宽度,并且从jQuery UI 1.9开始,tab小部件使用内联样式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]
        }]
    });
});?