HighCharts全宽问题(HighCharts full width issue)

我试着让我的渲染图填补父DIV的100％，但没有成功。 有没有什么办法可以移除左侧和右侧的差距？

http://jsfiddle.net/sKV9d/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chart',
        margin: 0,
        width: 300,
        height: 200,
        defaultSeriesType: 'areaspline'
    },    

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],    

        marker: {
            enabled: false
        }
    }]
});

Answer 1:

如果您删除的选项width: 300, height: 200这样的：

    var chart = new Highcharts.Chart({
chart: {
    renderTo: 'chart',
    margin: 0,
    defaultSeriesType: 'areaspline'
},    

...

它会自动填充容器。

Answer 2:

这个问题是因为jQuery UI的。 绘制图表调用此代码回流图表后。 这个固定我的问题

chart.reflow();

Answer 3:

设置minPadding和maxPadding为0，请参阅： http://jsfiddle.net/sKV9d/3/

Answer 4:

试试这个 ：

var height= $("#container").height();
var width= $("#container").width();

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chart',
        margin: 0,
        width: width,
        height: height,
        defaultSeriesType: 'areaspline'
    },    

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],    

        marker: {
            enabled: false
        }
    }]
});

Answer 5:

我解决它通过

window.dispatchEvent(new Event('resize'));

UPD：

1. 除去宽度和高度属性。
2. 添加到的CSS以下代码以图表块调整到#container的100％：

图表{宽度：100％; 高度：100％; }

2A。 另一种方式是 - 在情况下，如果不能在“设计”时可以回流图表负载（即呼叫chart.reflow（））之后图表定义容器的大小：

chart: {

    events: {
        load: function(event) {
        **event.target.reflow();**
      }
    }
},

见例如http://jsfiddle.net/yfjLce3o/

Answer 6:

如果你不提供width ，以图表属性，它应该自动获得容器的宽度。 所以，只是删除从图表的宽度，给容器width: 100%并应工作。

如果你想要一个特定的宽度，只是改变容器宽度为特定的大小。 图表仍应该尺寸的100％。 的jsfiddle

例：

HTML

<div id="container">
    <div id="chart"></div>
</div>

JS

    var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'chart',
        margin: 0,
        height: 200,
        defaultSeriesType: 'areaspline'
    },

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],

        marker: {
            enabled: false
        }
    }]
});

CSS

#container {
    width: 100%;
    height: 200px;
}

Answer 7:

与Highcharts问题已经报告在这里 。 为了解决这个问题，我们可以做一些像上面提到。 我也面临着同样的问题，所以我已经用它来解决

window.dispatchEvent(new Event('resize'));

我的渲染图等之后：

this.chartData={
...     //some required data object to render chart
}

 Highcharts.stockChart('divContainerID', this.chartData, function (chart) {});
 window.dispatchEvent(new Event('resize'));

Answer 8:

使用updateChart功能和呼叫chart.reflow（）这个函数里面

scope.updatechart = function(){
     scope.chart.reflow();
}

调用updatechart使用任何刷新机制每30秒方法

Answer 9:

只是简单地添加CSS

.highcharts-container{
  width: 100% !important;
}

.highcharts-root{
  width: 100% !important;
}

文章来源: HighCharts full width issue