javascript - HighCharts全宽问题

Question

我试图让我的渲染图表填充父 div 的 100%，但没有成功。有什么办法可以消除左右两边的缝隙吗？

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

score 17 · Accepted Answer

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

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

...

它会自动填充容器。

score 16 · Accepted Answer

问题是因为 jquery UI。渲染图表后调用此代码以重排图表。这解决了我的问题

chart.reflow();

score 9 · Accepted Answer

9

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

于 2013-05-02T11:10:20.883 回答

score 8 · Accepted Answer

我解决了

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

升级版：

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

图表{宽度：100%；高度：100%；}

2a. 另一种方法是 - 如果在“设计”期间无法定义容器大小，您可以在图表加载后重排图表（即调用 chart.reflow(); ）：

chart: {

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

参见示例http://jsfiddle.net/yfjLce3o/

score 5 · Accepted Answer

Try this :

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

score 5 · Accepted Answer

只需简单地添加 CSS

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

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

score 3 · Accepted Answer

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'));

score 2 · Accepted Answer

如果您不向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;
}

score 0 · Accepted Answer

我对其进行了测试，它运行良好：

chart-tab 是 div，并且包含高图表 div，所以首先需要定义两个 DIV，第一个用于包含chart('chart-container')'chart-container' 的容器，即 'chart-tab'，然后一个库必须added('resizesensor')用于为 'chart-tab' DIV on-change 添加事件，函数如下：

    新的 ResizeSensor($('#chart-tab'), function(){
    如果（图表）{  
    var wid = document.getElementById('chart-tab').clientWidth;
        var hei = document.getElementById('chart-tab').clientWidth;
        图表.更新（{
            图表： {
            宽度：宽，
            身高：嘿嘿
            }
        });

    }
    });

score 0 · Accepted Answer

使用 updateChart 函数并在该函数内调用 chart.reflow()

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

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

score 0 · Accepted Answer

0

For me using Angular it was solved by moving setting the option in ngAfterViewInit!

于 2022-01-28T08:41:07.340 回答

score 0 · Accepted Answer

就我而言，这是一个加载问题，导致图表容器太窄。如果你使用 jQuery，然后像这样加载你的图表

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

score 0 · Accepted Answer

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

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

javascript - HighCharts全宽问题

13 回答 13

图表{宽度：100%；高度：100%；}

Related

Reference