HighCharts全宽度问题

Question

我试图使我的渲染图表填充100%的父div没有成功.有什么方法可以消除左右两侧的间隙吗？

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

只需添加 CSS

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

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

Answer 4

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

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

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 7

试试这个 :

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
        }
    }]
});