如何增加绘图区域图的宽度和高度

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>