问Highstock图形宽度未正确呈现
EN

Stack Overflow用户

提问于 2011-12-05 09:40:05

回答 5查看 15.3K关注 0票数 8

你好，我在使用jquery标签页时遇到了一个高库存的问题。

这是构造函数的代码。

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

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

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

有谁有解决这个问题的办法吗？

highcharts

jquery-tabs

highstock

回答 5

Stack Overflow用户

发布于 2013-11-04 13:20:58

您还可以触发window.resize事件

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

Highcharts应该更新图表大小

票数 21

Stack Overflow用户

发布于 2011-12-06 16:58:34

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

票数 10

Stack Overflow用户

发布于 2013-02-06 04:08:02

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

您应该使用图表所在选项卡的activate事件，而不是使用jQuery的document ready事件来初始化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]
        }]
    });
});