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

Question

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

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：

删除宽度和高度属性。
将以下代码添加到.css中，以便将图表块调整为#container的100％：

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

2a上。另一种方法是 - 如果在＆＃34;设计＆＃34;期间无法定义容器尺寸。时间你可以在图表加载后重排图表（即调用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

使用updateChart函数并在该函数内部调用chart.reflow（）

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

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

Answer 8

只需添加CSS

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

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

Answer 9

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 10

我对其进行了测试，并且效果很好：

chart-tab是div，并且包含高图表div，因此您首先需要定义两个DIV，第一个用于包含chart('chart-container')，第二个是“ chart-container”的容器，即“ chart-tab” '，那么一个库必须是added('resizesensor')才能添加'chart-tab'DIV on-change事件，这里的功能如下：


    new ResizeSensor($('#chart-tab'), function(){ 
    if(chart){  
    var wid = document.getElementById('chart-tab').clientWidth;
        var hei = document.getElementById('chart-tab').clientWidth;
        chart.update({
            chart: {
            width: wid,
            height: hei
            }
        });

    }
    });

Answer 11

您可以在项目的任何地方使用chart.update函数。

   Highcharts.charts.forEach(function (chart) {
    chart.update({ chart: { width: some value } }, true, true, true);
  })

Answer 12

在我的情况下，这是一个加载问题，导致图表容器过窄。如果您使用jQuery，请按以下方式加载图表

$(document).ready(function() {
    let chart = Highcharts.stockChart('chart-container', {
    [...]
    }
}

HighCharts全宽度问题

12 个答案:

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