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

将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％：

chart { width: 100%; height: 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的问题已经报道了here。为了解决这个问题，我们可以做上面提到的事情。我也遇到了同样的问题所以我通过使用解决了它

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

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

Answer 9

只需添加CSS即可

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

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