Vue3中Highcharts图表显示正常但Pattern Fill库无法生效求助

问题根源 #

你的代码里有两个关键问题导致图案填充没显示：

1. 图案线条无颜色：只设置了strokeWidth但没指定stroke颜色，默认线条颜色和背景色重合，肉眼看不到图案；
2. ES模块引入的兼容性问题：直接从esm.sh引入的highcharts-pattern-fill在部分Vue3环境下可能无法正确完成扩展注册，导致Highcharts识别不了pattern配置。

修正后的代码 #

<template>
  <div id="container"></div>
</template>

<script>
// 推荐用npm安装依赖后引入，避免CDN模块加载问题
import Highcharts from 'highcharts';
import HighchartsPatternFill from 'highcharts-pattern-fill';

// 显式执行扩展注册
HighchartsPatternFill(Highcharts);

export default {
  mounted() {
    Highcharts.chart('container', {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Pattern Fill Example'
      },
      series: [
        {
          data: [1, 3, 2, 4],
          color: {
            pattern: {
              path: {
                d: 'M 10 0 L 0 10 M -5 5 L 5 15 M 15 -5 L 25 5',
                strokeWidth: 2,
                // 必须指定线条颜色，和背景区分开
                stroke: '#333'
              },
              width: 10,
              height: 10
            }
          }
        }
      ]
    });
  }
};
</script>

<style scoped>
#container {
  height: 400px;
  width: 100%;
}
</style>

额外建议 #

• 先通过npm安装依赖，避免CDN模块的兼容性问题：

  npm install highcharts highcharts-pattern-fill --save
  

• 如果用Vue3的<script setup>语法，注册逻辑完全一致，只需把组件导出改成setup写法即可。

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