如何增加繪圖區域圖的寬度和高度

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>