引导网格中绘图图表周围的巨大空白 [英] Huge whitespace around plotly chart in bootstrap grid

问题描述

我有一个.Net应用程序，试图在其中使用bootstrap.js和plotly.js创建图形.

I have a .Net application in which I am trying to create a graph using bootstrap.js and plotly.js.

当我创建一个响应式图表时，我的网格中有巨大的空白存在问题.我发现问题的部分原因是，可打印的svg容器的大小默认为450px的高度.

I have a problem with a huge white-space in my grid when I create a responsive chart. I have figured out that a part of the problem is that size of the plotly svg-container defaults to 450px in height.

我创建了小提琴，该小提琴显示了巨大的空白问题.

I have created a fiddle showing the huge white space problem.

在我的小提琴中，我有一个很小的带注释的代码块，它可以设置布局大小，但是即使设置似乎并没有真正帮助删除大部分空白.同样，如果它变得太小，它也会开始裁剪掉一些图表.

In my fiddle I have a small commented code block that sets the layout size, but even setting that doesn't really seem to help with removing most of the white space. Also if it becomes too small it starts cropping away some of the chart.

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

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

您可能已经猜到我想缩小它-删除一些空白，以使下表看起来不太合适.

As you might have guessed I would like to make it smaller - remove quite some of the white space, so that the table below doesn't seem so out of place.

推荐答案

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

You can use the layout functionality. For your fiddle example you could do the following:

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

Plotly.plot(gd, pieData, layout);

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

You can play with the margin property values to position your figure properly.

这篇关于引导网格中绘图图表周围的巨大空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！