So erhöhen Sie die Breite und Höhe des Plot-Bereichs-Diagramms

Question

Ich möchte die Höhe und Breite des div-Tags nicht erhöhen. Ich möchte nur den folgenden Teil des Graphen erhöhen. Ich verwies this code

Mein HTML-Code ist:

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

Und mein plotly.js-Code ist:

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]']); 
}); 

Wenn ich dieses Diagramm in meine Anwendung einfüge, dann wird die Grafik sehr klein. Ich habe versucht, die Breite und Höhe zu erhöhen, aber ich konnte diesen Teil des Graphen nicht vergrößern.

Answer 1

Fügen Sie margin zu layout hinzu und geben Sie den Abstand (in Pixel) des Diagramms von der umgebenden Box an.

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>