如何去掉 Plotly 图表顶部的白色 space？

Question

如何去除 Plotly 图表上方的白色 space？我问过一个类似的问题 here 关于将这种创建图表的方法与其他教程进行比较，但是我没有得到回复所以我想我会再问这个问题，但是使用更少的代码只生成一个图表.我不知道问题出在哪里。任何帮助是极大的赞赏。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
  <h1>Plotly Test</h1>
  <p>This is only a test (so far)</p> 
</div>  
  <div class="row">
    <div class="col-sm-2">
      <p><center>Chart 1</center></p>
      <div id="myDiv" style="width:325px;height:1000px;"></div>      
    </div>
    <div class="col-sm-2">          
    </div>
    <div class="col-sm-2" >
  </div>
  <div class="col-sm-6" ></div>
</body>
</html>
<script> //scatter method
var trace1 = {
  x: [67, 79, 58, 50, 53, 63, 76, 74, 85, 55, 77, 86, 69, 95, 93, 93, 84, 67, 83, 57, 61, 58, 80, 99, 70, 78, 70, 99, 72, 85, 93, 83,
52, 99, 80, 69, 89, 69, 51, 98, 72, 90, 92, 62, 55, 65, 75, 100, 73, 100, 93, 53, 95,
63, 81, 70, 87, 72, 72, 60, 80, 98, 69, 72, 60, 56, 59, 73, 94, 58, 80, 88, 71, 88, 57, 73, 79, 63, 83, 74, 61, 73, 87, 67, 51, 98, 98, 93, 57, 50, 51, 95, 76, 52, 75, 94,
50, 88, 50, 67, 55, 50, 53, 54, 84, 84, 70, 55, 99, 67, 100, 61, 84, 95, 87, 75, 56, 75, 64, 68, 67, 73, 58, 64, 97, 69, 88, 57,
51, 93, 75, 68, 57, 99, 90, 85, 68, 77, 97, 62, 92, 100, 98, 99, 57, 63, 72, 80, 53, 62, 93, 61, 84, 67, 90, 90, 94, 76, 99, 99,
92, 77, 65, 89, 86, 86, 69, 74, 54, 59, 63, 72, 94, 62, 58, 84, 68, 62, 60, 89, 66, 90, 76, 67, 69, 90, 88, 59, 55, 85, 51, 67, 94, 93, 91, 59, 97, 61, 50, 65, 71, 88, 74,
86, 58, 69, 72, 52, 61, 82, 65, 94, 95, 62, 100, 96, 65, 98, 50, 76, 66, 98, 69, 81, 95, 78, 87, 76, 68, 85, 97, 93, 87, 89, 80,
88, 60, 78, 84, 80, 82, 99, 87, 54, 59, 80, 82, 74, 60, 71, 59, 80, 89, 58, 59, 54, 79, 89, 66, 59, 56, 100, 59, 87, 61, 77, 82,
76, 84, 67, 68, 97, 94, 94, 100, 73, 79, 83, 78, 53, 61, 79, 67, 88, 61, 81, 78, 64, 95, 61, 87, 76, 79, 82, 86, 83, 61, 75, 90,
98],
    y: [1000, 1001, 1002, 1003, 1004, 1005, 1006,
1007, 1008, 1009, 1010, 1011, 1012, 1013, 1014, 1015, 1016, 1017, 1018, 1019, 1020, 1021, 1022, 1023, 1024, 1025, 1026, 1027, 1028, 1029, 1030, 1031, 1032, 1033, 1034, 1035, 1036, 1037, 1038, 1039, 1040, 1041, 1042, 1043, 1044, 1045, 1046, 1047, 1048, 1049,
1050, 1051, 1052, 1053, 1054, 1055, 1056, 1057, 1058, 1059, 1060, 1061, 1062, 1063, 1064, 1065, 1066, 1067, 1068, 1069, 1070, 1071, 1072, 1073, 1074, 1075, 1076, 1077, 1078, 1079, 1080, 1081, 1082, 1083, 1084, 1085, 1086, 1087, 1088, 1089, 1090, 1091, 1092,
1093, 1094, 1095, 1096, 1097, 1098, 1099, 1100, 1101, 1102, 1103, 1104, 1105, 1106, 1107, 1108, 1109, 1110, 1111, 1112, 1113, 1114, 1115, 1116, 1117, 1118, 1119, 1120, 1121, 1122, 1123, 1124, 1125, 1126, 1127, 1128, 1129, 1130, 1131, 1132, 1133, 1134, 1135,
1136, 1137, 1138, 1139, 1140, 1141, 1142, 1143, 1144, 1145, 1146, 1147, 1148, 1149, 1150, 1151, 1152, 1153, 1154, 1155, 1156, 1157, 1158, 1159, 1160, 1161, 1162, 1163, 1164, 1165, 1166, 1167, 1168, 1169, 1170, 1171, 1172, 1173, 1174, 1175, 1176, 1177, 1178,
1179, 1180, 1181, 1182, 1183, 1184, 1185, 1186, 1187, 1188, 1189, 1190, 1191, 1192, 1193, 1194, 1195, 1196, 1197, 1198, 1199, 1200, 1201, 1202, 1203, 1204, 1205, 1206, 1207, 1208, 1209, 1210, 1211, 1212, 1213, 1214, 1215, 1216, 1217, 1218, 1219, 1220, 1221,
1222, 1223, 1224, 1225, 1226, 1227, 1228, 1229, 1230, 1231, 1232, 1233, 1234, 1235, 1236, 1237, 1238, 1239, 1240, 1241, 1242, 1243, 1244, 1245, 1246, 1247, 1248, 1249, 1250, 1251, 1252, 1253, 1254, 1255, 1256, 1257, 1258, 1259, 1260, 1261, 1262, 1263, 1264,
1265, 1266, 1267, 1268, 1269, 1270, 1271, 1272, 1273, 1274, 1275, 1276, 1277, 1278, 1279, 1280, 1281, 1282, 1283, 1284, 1285, 1286, 1287, 1288, 1289, 1290, 1291, 1292, 1293, 1294, 1295, 1296, 1297, 1298, 1299], 
margin: { t: 0 },
type: 'scatter',
mode: 'lines',
line: {
  color: 'rgb(219, 64, 82)',
  width: 1
 }
}
var data = [trace1];
var layout = {  
  xaxis: {
        range: [0, 150],
        autotick: false,
        ticks: 'outside',
        tick0: 0,
        dtick: 30,
        ticklen: 8,
        tickwidth: 4,
        tickcolor: '#000'    
  },
  yaxis: {
        range: [1000, 1300],
        autotick: false,
        ticks: false,
        tick0: 1000,
        dtick: 5,
        ticklen: 8,
        tickwidth: 4,
        tickcolor: '#000'    
  }
};
Plotly.newPlot('myDiv', data, layout);

</script>

Answer 1

Plotly 默认设置边距，您可以通过覆盖 layout.margin 来摆脱它。请参阅此处的文档：https://plot.ly/javascript/reference/#layout-margin and this jsFiddle: https://jsfiddle.net/m3pb2tdz/

如何去掉 Plotly 图表顶部的白色 space？

How do I get rid of the white space on top of my Plotly chart?

html

javascript

plotly

plotly.js