Highcharts添加条形内阴影、圆角效果 基于@ViewBag数据配置

实现方案 #

你要实现的是堆叠条形进度条的两个效果，可通过自定义滤镜+系列单独配置完成，以下是可用的配置示例：

1. 核心配置说明

• 黄色条形圆角：单独给进度系列配置borderRadius属性即可，可自定义圆角大小，也可指定仅某几个角显示圆角
• 灰色背景内阴影：Highcharts无内置内阴影属性，通过自定义SVG滤镜实现，可灵活调整阴影的偏移、模糊度、颜色透明度

2. 完整配置代码

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    // 自定义内阴影SVG滤镜
    defs: {
      innerShadow: {
        tagName: 'filter',
        id: 'inner-shadow',
        children: [
          { tagName: 'feOffset', dx: 0, dy: 2 },
          { tagName: 'feGaussianBlur', stdDeviation: 3, result: 'offset-blur' },
          { tagName: 'feComposite', operator: 'out', in: 'SourceGraphic', in2: 'offset-blur', result: 'inverse' },
          { tagName: 'feFlood', 'flood-color': 'rgba(0,0,0,0.2)', 'flood-opacity': 1 },
          { tagName: 'feComposite', operator: 'in', in2: 'inverse', result: 'shadow' },
          { tagName: 'feComposite', operator: 'over', in: 'shadow', in2: 'SourceGraphic' }
        ]
      }
    }
  },
  xAxis: { visible: false },
  yAxis: { visible: false, min: 0, max: 100 },
  legend: { enabled: false },
  plotOptions: {
    bar: {
      stacking: 'percent',
      borderWidth: 0,
      pointPadding: 0,
      groupPadding: 0.2
    },
    series: { states: { hover: { enabled: false } } }
  },
  series: [
    {
      // 黄色进度条系列
      data: [@ViewBag.FinalPer],
      color: '#fbc02d',
      // 配置圆角，可按需调整数值，也可单独指定圆角位置
      borderRadius: 5
    },
    {
      // 灰色背景条系列
      data: [100 - @ViewBag.FinalPer],
      color: '#e3e3e3',
      // 应用自定义内阴影滤镜
      color: 'url(#inner-shadow) #e3e3e3'
    }
  ]
})

3. 效果调整说明

• 圆角调整：可将borderRadius修改为对象格式，仅保留需要的圆角，例如仅保留右侧圆角：borderRadius: { topRight: 5, bottomRight: 5, topLeft: 0, bottomLeft: 0 }
• 内阴影调整：修改defs内滤镜的参数即可：调整feOffset的dx/dy改阴影偏移，调整feGaussianBlur的stdDeviation改模糊程度，调整feFlood的flood-color改阴影颜色和透明度
• 如果使用竖向柱形图，把chart.type改为column即可。

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