javascript - 图表宽度没有渲染好

Question

我在一个元素中工作，我正在尝试构建一些图表，我使用 HighCharts jQuery 库，我将图表或图形拆分为行 > 列 > 容器。在 HighCharts jQuery 库演示中，他们将图表置于 div 宽度内联样式中，如下所示:

<div id="container1" style="width: 310px; max-width: 800px;
height: 400px; margin: 0 auto"></div>

我的问题是，当加载图表时，它的宽度始终为 310 像素，无论我的屏幕宽度如何，但是当调整我的屏幕大小时，它的渲染正常，我需要这个 proyect 工作响应等等手机我无法调整屏幕大小，有人可以帮助我吗？

Answer 1

Fiddle Link

HTML代码

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="width: 100%; max-width: 800px;
height: 400px; margin: 0 auto"></div>

JS代码

var chart = new Highcharts.Chart({

chart: {
    defaultSeriesType: 'line',
    renderTo: 'container1'
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

series: [{
    data: [29.9, 0, 106.4, 129.2, 144.0, 176.0, 0, 148.5, 216.4, 194.1, 95.6, 54.4],
}]

});