如何调整Highchart中spline类型图表的背景色高度和宽度

你当前配置的chart.backgroundColor是作用于整个图表容器的背景，因此会超出x、y轴包裹的绘图区域范围，要实现仅坐标轴范围内显示背景、调整绘图区尺寸，按以下步骤修改配置即可：

1. 替换背景色配置 #

移除chart下的backgroundColor配置，新增plotBackgroundColor属性，该属性专门用来控制x、y轴围成的绘图区域的背景色，示例配置：

chart: {
  type: 'spline',
  alignTicks: false,
  // 移除原先的backgroundColor配置
  plotBackgroundColor: '#F3F3F3' // 新增这行，作用于绘图区背景
}

2. 调整绘图区宽高 #

如果需要调整绘图区的尺寸，可以通过调整图表边距间接控制，也可以直接设置容器尺寸：

• 调整边距控制绘图区大小：通过chart.margin属性设置上、右、下、左四个方向的边距，数值越大绘图区越小，示例：

chart: {
  type: 'spline',
  alignTicks: false,
  plotBackgroundColor: '#F3F3F3',
  margin: [30, 20, 50, 50] // 四个值分别对应上、右、下、左的边距，单位px
}

• 直接设置整体容器尺寸：通过chart.width和chart.height设置整个图表容器的宽高，再配合边距调整绘图区占比：

chart: {
  type: 'spline',
  alignTicks: false,
  plotBackgroundColor: '#F3F3F3',
  width: 800, // 容器宽度，单位px
  height: 400, // 容器高度，单位px
  margin: [30, 20, 50, 50]
}

3. 可选扩展配置 #

如果需要给绘图区添加边框等样式，可以追加以下配置：

chart: {
  // 其他原有配置
  plotBorderWidth: 1, // 绘图区边框宽度
  plotBorderColor: '#ccc', // 绘图区边框颜色
  plotBorderRadius: 4 // 绘图区圆角
}

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