如何为Highcharts柱状图添加黑色半透明斜纹图案填充？

完全可以用Highcharts的pattern-fill.js结合自定义SVG图案实现，不用依赖外部图片，且斜纹图案可复用。以下是具体实现步骤和代码：

1. 注册全局可复用的斜纹图案 #

先通过Highcharts的方法注册一个自定义SVG图案，这个图案可以被所有系列复用：

Highcharts.createElement('pattern', {
    id: 'diagonal-stripe',
    width: 8,
    height: 8,
    patternUnits: 'userSpaceOnUse',
    patternContentUnits: 'userSpaceOnUse'
}, {}, true);

// 向图案中添加斜纹线条
Highcharts.createElement('line', {
    x1: 0,
    y1: 0,
    x2: 8,
    y2: 8,
    stroke: '#000000',
    'stroke-width': 1,
    opacity: 0.2 // 对应20%不透明度
}, null, 'diagonal-stripe');

• width和height控制斜纹密度，数值越小斜纹越密集
• stroke设为黑色，opacity设为0.2满足需求
• 注册的id: 'diagonal-stripe'是后续引用的标识

2. 配置柱状图系列 #

在series的color配置中，同时设置基础填充色和图案引用，实现颜色+斜纹的叠加效果：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    series: [{
        name: '数据系列1',
        data: [10, 20, 30, 40],
        color: {
            stops: [
                [0, '#9fdae9'], // 基础柱体颜色
                [1, '#9fdae9']
            ],
            pattern: {
                path: {
                    d: 'M 0 0',
                    strokeWidth: 0
                },
                url: '#diagonal-stripe' // 引用注册的斜纹图案
            }
        }
    }, {
        name: '数据系列2',
        data: [15, 25, 35, 45],
        color: {
            stops: [
                [0, '#f47e60'], // 其他颜色的柱体
                [1, '#f47e60']
            ],
            pattern: {
                url: '#diagonal-stripe' // 复用同一个斜纹图案
            }
        }
    }]
});

关键说明 #

• 所有需要使用该斜纹的系列，只要在color.pattern.url中引用#diagonal-stripe即可，无需重复定义图案
• 基础颜色通过stops数组设置，保证柱体底色为目标色，斜纹作为叠加层显示
• 若需要调整斜纹角度、粗细或密度，只需修改注册图案时的line元素属性（比如把x2:8,y2:8改成x2:0,y2:8可得到反向斜纹）

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