javascript - 固定 div 的宽度，即使数据很小

Question

即使数据不可用，我也想将图表的宽度固定为 100%。我在我的 js 代码中使用以下属性来获取水平滚动，并且我的应用程序需要以下属性。

"width": chart1.data.rows.length *130,
 "bar": {groupWidth: 40},

下面的属性是用来固定图表的宽度和高度的，但是它不起作用，因为我已经使用上面提到的代码来计算和定义数据较多时水平滚动条显示所需的宽度。

  chartArea:{left:20,top:0,width:'100%',height:'75%'}

关于如何将图表的宽度固定为 100%(即使数据很少)有什么建议吗？请找到演示 here

------编辑----

当数据较少时:

https://plnkr.co/edit/q0NmXQVXgmnOi3g1WcEx?p=preview - 当数据较少且使用“width”设置宽度时:chart1.data.rows.length *130，当数据不多时，您可以看到图表区域最小化。

https://plnkr.co/edit/VZqEfHdgZQOEzfUnO21G?p=preview - 宽度设置为 100%。这就是我希望我的图表的样子，即使数据较少但如果我使用宽度:“100%”，当数据较多时它不会显示水平滚动条显示在 https://plnkr.co/edit/iIVfF4rUv0c13SLaNMkr?p=preview

当数据较多时:

https://plnkr.co/edit/3kZR69VMSjFcBHUaCnB9?p=preview - 当数据较多且宽度设置为100%时，不显示水平滚动条。

https://plnkr.co/edit/iIVfF4rUv0c13SLaNMkr?p=preview - 当数据更多并且使用“width”设置宽度时:chart1.data.rows.length *130，您会注意到向下滚动到页面的水平滚动条，您可以在其中滚动并查看数据。

Answer 1

如果不设置图表宽度，它将采用父元素的宽度，即 100%，如 docs 中所述:

One very common option to set is the chart height and width. You can specify the chart size in two places: in the HTML of the container element, or in the chart options. If you specify the size in both locations, the chart will generally defer to the size specified in the HTML. If you don't specify a chart size either in the HTML or as an option, the chart might not be rendered properly.

如果您计算出的建议宽度大于窗口宽度，您可以将其添加为:

var suggestedWidth = chart1.data.rows.length*130;
if( window.innerWidth<suggestedWidth ) {
  chart1.options.width = suggestedWidth;
};

参见 2 个示例:first和 second .