如何用Plotly JS制作适配小空间的极简箱线图？

需求说明 #

• 需在应用空白区域嵌入小型箱线图，展示金额数据的基础分布
• 要求无交互、极简风格，适配有限的布局空间
• 原Plotly默认示例尺寸过大，需调整优化

实现步骤 #

1. 容器尺寸控制 #

通过CSS设置容器固定宽高，适配布局空间：

#myDiv {
  width: 200px;
  height: 120px;
}

2. Plotly配置优化 #

通过layout和config参数禁用交互、简化样式：

• 隐藏坐标轴标签、刻度线、网格线
• 禁用hover提示、缩放、拖拽等交互
• 简化箱线图样式，去掉冗余元素

完整代码示例 #

<div id="myDiv"></div>

#myDiv {
  width: 200px;
  height: 120px;
}

var y0 = [525,784,674,453,241.6,532,662,465,636,508,345,29,526,476,1354.16,896.16,288.16,786,1445,870,731,521,835.16,1162.16,899.16,664.16,687.16,1896.16,1106.16,1106.16,808.16,938.16,808.16,545.16,778.16,1052.16,1274.16,125,125,125,905,822,842,706,900,369,447,361,404,514,529,913,717,806,557,1083,736,158,739,909,1108,243,584,650,427,603,603,650.16,776,933,489,789,863,779,610,1128,696,460,933,1,25,632,923,540,714,958,444,236.8,905,776,776,1000,776,584,662,770,703,817,871,793,870,776,840,695,951,905,863,589,858,533,731,589,692,410,301,170,382,243,259,420,398,364,704,612,379,279,305,213,347,368,215,295,693,770,714,618,425,484,656,896,943,683,454.16,535,524,548,732,782,725,106,596,790,656,594,496,713,883,805,718,664,836,529,677,708,884,645,1401.16,736,669,898,370,832,668,952,1066,775,1,1006,776,756,776,705,698,618,776,1242,291,905,776,754,798,713,655,811,295,840,595,613,489,851,770,740,569,474,702,414,776,743,986,767,713,665,812,827,213,716,681,675,257,665,831,223,720.16,2312.16,233,721,696]

var trace1 = {
  x: y0,
  type: 'box',
  boxpoints: false, // 隐藏散点
  line: {width: 1}, // 线条变细
  fillcolor: 'rgba(128,128,128,0.2)' // 填充色浅淡
};

var layout = {
  margin: {l: 10, r: 10, t: 5, b: 5}, // 缩小边距
  xaxis: {
    showticklabels: false, // 隐藏x轴刻度
    showgrid: false, // 隐藏网格
    zeroline: false // 隐藏零线
  },
  yaxis: {
    showticklabels: false,
    showgrid: false,
    zeroline: false
  },
  showlegend: false // 隐藏图例
};

var config = {
  displayModeBar: false, // 隐藏模式栏
  staticPlot: true // 禁用所有交互
};

Plotly.newPlot('myDiv', [trace1], layout, config);

关键优化点 #

• 尺寸适配：通过CSS固定容器大小，配合布局边距压缩图表占用空间
• 极简样式：隐藏坐标轴、网格、图例，简化箱线线条与填充色
• 无交互：通过staticPlot和displayModeBar禁用所有交互功能，确保图表静态展示

内容的提问来源于stack exchange，提问作者Travis Heeter