Next.js中Highcharts柱状图图案填充不显示问题求助

你遇到的核心问题是在Next.js SSR环境下，Highcharts的pattern-fill扩展初始化时机不对，同时图案配置缺少必要的描边颜色，导致填充效果无法显示。以下是具体的修正方案：

问题排查点 #

• SSR环境下的扩展加载时机：直接在组件内执行patternFill(Highcharts)会在服务端渲染阶段执行，但此时没有浏览器DOM环境，扩展初始化失效，必须确保在客户端执行。
• 图案配置缺失关键属性：你的path配置只定义了线条形状和宽度，但未指定描边颜色，默认颜色可能和柱子背景色一致，导致图案不可见。

修正后的代码 #

import { useEffect, useState } from 'react';
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import patternFill from "highcharts-pattern-fill";

export default function Chart() {
  const [chartOptions, setChartOptions] = useState(null);

  useEffect(() => {
    // 仅在客户端初始化pattern-fill扩展
    patternFill(Highcharts);
    
    setChartOptions({
      chart: {
        type: "column",
      },
      title: {
        text: "Column Chart with Stripped Bars",
      },
      series: [
        {
          name: "Apple",
          data: [7, 6, 9, 14, 18, 21],
          color: {
            pattern: {
              path: {
                d: "M-1,1 l2,-2 M0,8 l8,-8 M7,9 l2,-2",
                strokeWidth: 4,
                // 必须指定描边颜色，否则图案无法显示
                stroke: '#2c3e50'
              },
              width: 10,
              height: 10,
              opacity: 0.5,
            },
          },
        },
      ],
    });
  }, []);

  if (!chartOptions) return null;

  return (
    <div>
      <HighchartsReact highcharts={Highcharts} options={chartOptions} />
    </div>
  );
}

其他可选实现方式 #

• CDN引入方式：在组件内通过next/head引入CDN资源，确保资源加载完成后再初始化图表：

import Head from 'next/head';
import { useEffect, useState } from 'react';
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

export default function Chart() {
  const [chartOptions, setChartOptions] = useState(null);

  useEffect(() => {
    // 等待CDN加载的pattern-fill生效后再配置图表
    if (window.Highcharts) {
      setChartOptions({
        chart: { type: "column" },
        title: { text: "Column Chart with Stripped Bars" },
        series: [{
          name: "Apple",
          data: [7, 6, 9, 14, 18, 21],
          color: {
            pattern: {
              path: { d: "M-1,1 l2,-2 M0,8 l8,-8 M7,9 l2,-2", strokeWidth:4, stroke:'#2c3e50' },
              width:10, height:10, opacity:0.5
            }
          }
        }]
      });
    }
  }, []);

  return (
    <>
      <Head>
        <script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
      </Head>
      {chartOptions && <HighchartsReact highcharts={Highcharts} options={chartOptions} />}
    </>
  );
}

• 使用Highcharts内置图案：Highcharts提供了预定义图案，可直接通过patternIndex调用简化配置：

color: {
  patternIndex: 1 // 对应内置斜线图案
}

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