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

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并指定周围框中图表的距离（以像素为单位）。

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;