javascript – 在bootstrap网格中的情节图周围的巨大空白

我有一个.Net应用程序,我正在尝试使用bootstrap.js和plotly.js创建一个图形.

当我创建响应式图表时,我的网格中存在巨大的空白区域问题.我已经发现问题的一部分是剧情svg-container的大小默认为450px的高度.

我创建了a fiddle,显示了巨大的空白问题.

在我的小提琴中,我有一个小的注释代码块来设置布局大小,但即使设置这似乎也没有帮助删除大部分空白区域.此外,如果它变得太小,它会开始裁掉一些图表.

//can adjust size of svg-container
//but doesn't adjust white space
//var layout = {
//  height: 350
//}

//Plotly.plot(gd, pieData, layout);

正如你可能已经猜到的那样,我想让它更小 – 删除相当一些的空白区域,以便下面的表格看起来不那么不合适.

解决方法:

您可以使用布局功能.对于您的小提琴示例,您可以执行以下操作：

var layout = {
  height: 230,
  width: 100,
  margin: {
    l: 60,
    r: 10,
    b: 0,
    t: 10,
    pad: 4
  }
};

Plotly.plot(gd, pieData, layout);

您可以使用边距属性值来正确定位图形.

标签：grid-layout,javascript,css,twitter-bootstrap-3,plotly
来源： https://codeday.me/bug/20190727/1551503.html