如何增加绘图面积图的宽度和高度

Question

我不想增加 div 标签的高度和宽度。只是我只想增加图表的一部分。我提到了 this code

我的html代码是：

<div id="myDiv" style="width: 480px; height: 400px;"></div>

我的 plotly.js 代码是：

var trace1 = {
x: ['2013-10-04 22:23:00', '2013-10-06 22:23:00',  '2013-11-04 22:23:00',       '2013-11-07 22:23:00','2013-12-04 22:23:00', '2013-12-08 22:23:00'],
y: [1, 3, 6,2, 4, 5],
fill: 'tozeroy',
type: 'scatter',
fillcolor: 'red'

};

var plotlyData = [trace1];                                      
plotly.newPlot('heap_memory_graph', plotlyData);
var plotDiv = document.getElementById('heap_memory_graph');

plotDiv.on('plotly_relayout',
 function(eventdata){  
   xValStart = new Date(eventdata['xaxis.range[0]']);
   xValEnd = new Date(eventdata['xaxis.range[1]']);
 });

当我将此图表放入我的应用程序时，图表变得非常小。我试图增加宽度和高度，但我无法增加这部分图表。

Answer 1

将 margin 添加到 layout 并指定图形与周围框的距离（以像素为单位）。

var trace1 = {
x: ['2013-10-04 22:23:00', '2013-10-06 22:23:00',  '2013-11-04 22:23:00',       '2013-11-07 22:23:00','2013-12-04 22:23:00', '2013-12-08 22:23:00'],
y: [1, 3, 6,2, 4, 5],
fill: 'tozeroy',
type: 'scatter',
fillcolor: 'red'
};
var layout = {
  margin: {
    l: 20,
    r: 10,
    b: 40,
    t: 10
  },
};

var plotlyData = [trace1];                                      
Plotly.newPlot('heap_memory_graph', plotlyData, layout);
var plotDiv = document.getElementById('heap_memory_graph');

  
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="heap_memory_graph" style="width: 480px; height: 400px;"></div>

如何增加绘图面积图的宽度和高度

How to increase width and height of plotly area graph

d3.js

plotly