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

2019-07-27 06:35:42 阅读：236 来源： 互联网

标签：grid-layout javascript css twitter-bootstrap-3 plotly

我有一个.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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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