Highcharts 图表正在显示，但 Highcharts 模式填充库无法工作

Question

我正在尝试在我的 Vue 3 应用程序中使用 Highcharts Pattern Fill 库。我已按照说明进行操作，图表已显示，但图案填充并未显示。我做错了什么？

Codepen 在这里：https://codepen.io/epatmalnieksge/pen/YzmOazG

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

<script>
import Highcharts from "https://esm.sh/highcharts";
import HighchartsPatternFill from "https://esm.sh/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
              },
              width: 10,
              height: 10
            }
          }
        }
      ]
    });
  }
};
</script>

Answer 1

要在 Highcharts 中包含模式填充模块，您可以直接从以下 URL 加载它：

https://code.highcharts.com/modules/pattern-fill.src.js