Question

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

正如您可能已经猜到的那样，我希望将其缩小 - 删除相当多的空白区域，以便下表看起来不太合适。

Answer 1

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

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

Plotly.plot(gd, pieData, layout);

您可以使用保证金属性值来正确定位您的数字。

Answer 2

在布局标签中使用宽度和高度来设置容器。使用像 -

var layout = {
    height : 400,
    width : 550,
    title : 'Demo',
    tracetoggle: false
};

由于模式栏（即采用图形捕捉，缩放，移动等），因此还有空白区域，因此您也可以替换模式栏，然后收缩svg容器。

隐藏模式栏 -

Plotly.newPlot('myDiv', data, layout, {displayModeBar: false});

要将图形移到顶部，请在svg-container div元素中使用内联样式，尽管这不是最好的方法，而是黑客 -

<div id="myDiv" style="margin-top: -50px;"></div>

希望这有帮助。

Answer 3

#allStates{
  height:300px;
  width:300px;

}

我将此添加到css并删除了空格。

引导网格中的图表周围有巨大的空白

3 个答案: