Highcharts 10.3.3：如何将交互式切换框从图表内移至底部？

根据你使用的图表工具，分几种常见场景处理：

1. ECharts 场景 #

如果是用ECharts制作的图表，直接修改配置项里的legend属性，将其定位到底部：

option = {
  legend: {
    bottom: 10, // 距离底部10px，可根据需求调整数值
    left: 'center' // 水平居中，可选配置
    // 其他样式可按需补充
  },
  // 其余图表配置内容...
};

2. Plotly 场景 #

Plotly图表则修改layout中的legend位置参数：

# Python示例
fig.update_layout(
    legend=dict(
        orientation="h", # 设置图例横向排列
        yanchor="bottom",
        y=-0.2, # 负数值将图例移到图表外部的底部区域
        xanchor="center",
        x=0.5
    )
)

// JavaScript示例
const layout = {
  legend: {
    orientation: "h",
    y: -0.2,
    yanchor: "bottom",
    x: 0.5,
    xanchor: "center"
  }
};

3. 自定义HTML控件场景 #

如果是自行开发的HTML交互式筛选框，直接用CSS调整位置：

/* 假设控件的类名为chart-filter */
.chart-filter {
  margin-top: 20px; /* 通过外边距让控件位于图表下方 */
  /* 也可使用绝对定位（需确保父容器为相对定位）：
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  */
}

核心思路就是找到对应控件/图例的位置配置项，将垂直位置设置为底部区域，再按需调整间距和对齐方式即可。

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