图表宽度无法呈现正常

Chart Width no render ok

本文关键字：      更新时间：2023-09-26

im 在一个项目中工作，并且我试图构建一些图表，im 使用 HighCharts jQuery 库，我将图表或图形拆分为行>colunms>containers。在HighCharts jQuery库演示中，他们将图表放在div宽度内联样式中，如下所示：

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

我的问题是，当加载图表时，它的宽度总是为 310px，没有我的屏幕的宽度，但是当调整屏幕大小时，它的渲染正常，我需要这个程序在移动设备中响应式等我无法调整屏幕大小，有人可以帮助我吗？

小提琴链接

网页代码

<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],
}]
});
相关文章：
  • 没有找到相关文章