Angular 18中Highcharts 3D柱状图渲染异常问题求助

使用highcharts: "^11.4.7"在Angular 18项目中，普通柱状图等其他图表均可正常渲染，但切换为3D柱状图时出现渲染异常。相同代码在旧版本Highcharts中可正常运行，相关代码如下：

this.myChart = Highcharts.chart({
  chart: {
    renderTo: "chartcontainer",
    type: "bar",
    backgroundColor: "rgba(255,255,255,0)",
    width: 600,
    height: 400,
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 15,
      depth: 50,
      axisLabelPosition: "auto",
      viewDistance: 25,
    },
    spacingTop: 10,
  },
  noData: {
    style: {
      fontWeight: "bold",
      fontSize: "15px",
    },
  },
  title: {
    text: this.chart_settings.title_setting.show_title
      ? !this.emptyChartData
        ? this.chart_settings.title_setting.title_name
        : " "
      : " ",
    style: {
      color: "#000000",
      fontWeight: "normal",
      fontSize: "24px",
      fontStyle: "none",
      textDecoration: "none",
      "font-family": "Roboto-Regular, sans-serif",
    },
    align: "center",
    verticalAlign: "top",
  },
  credits: {
    enabled: false,
  },
  legend: {
    enabled: true,
    itemStyle: {
      color: "#000000",
      cursor: "pointer",
      fontSize: "13px",
      textDecoration: "none",
      textOverflow: "ellipsis",
      fontWeight: "normal",
      fontStyle: "none",
      "font-family": "Roboto-Regular, sans-serif",
    },
    align: "center",
    verticalAlign: "bottom",
    alignColumns: false,
    navigation: {
      enabled: false,
    },
    symbolRadius: 100,
    symbolHeight: 12,
    symbolWidth: 12,
  },
  xAxis: {
    visible: true,
    gridLineColor: "#e6e6e6",
    gridLineWidth: 1,
    categories: ["Item1", "Item2", "Item3", "Item4", "Item5"],
    crosshair: true,
    lineWidth: 0,
    labels: {
      style: {
        color: "#000000",
        cursor: "default",
        fontSize: "13px",
        fontWeight: "normal",
        fontStyle: "none",
        textDecoration: "none",
        "font-family": "Roboto-Regular, sans-serif",
      },
      format: "{value}",
    },
  },
  yAxis: {
    visible: true,
    gridLineColor: "#e6e6e6",
    gridLineWidth: 1,
    reversedStacks: false,
    lineWidth: 0,
    min: 0,
    title: {
      text: "",
    },
    labels: {
      style: {
        color: "#000000",
        cursor: "default",
        fontSize: "13px",
        fontWeight: "normal",
        fontStyle: "none",
        textDecoration: "none",
        "font-family": "Roboto-Regular, sans-serif",
      },
      format: "{value}",
    },
  },
  plotOptions: {
    bar: {
      stacking: "normal", // If you're stacking bars
      pointPadding: 0, // Remove space between bars
      borderWidth: 0,
      depth: t25, // 3D depth for bars
      edgeColor: "rgba(0,0,0,0.05)", // Edge color to enhance 3D visibility
      edgeWidth: 1, // Edge width to highlight 3D effect,
      groupZPadding: 40,
    },

    series: {
      animation: false,
      dataLabels: {
        enabled: true,
        style: {
          fontSize: "13px",
          fontWeight: "normal",
          color: "#000000",
          textOutline: "none",
          textShadow: false,
          fontStyle: "none",
          textDecoration: "none",
          "font-family": "Roboto-Regular, sans-serif",
        },
        format: "{y}",
      },
    },
  },
  series: dataSeries,
})

请问如何让3D柱状图正常渲染？

• 显式引入Highcharts 3D模块：Highcharts 11+版本中3D功能不再默认集成，必须手动导入模块。在Angular组件中添加以下代码：

import * as Highcharts from 'highcharts';
import highcharts3D from 'highcharts/highcharts-3d';

// 初始化3D模块
highcharts3D(Highcharts);

• 修复未定义变量错误：代码中plotOptions.bar.depth: t25里的t25是未定义变量，直接改为数值，比如depth: 25，该错误会导致渲染逻辑异常。

• 调整3D配置参数适配新版本：新版本对3D视图参数的兼容性要求更严格，建议修改：

  • 将chart.options3d.viewDistance从25调整为50，避免图形被裁剪
  • 确保alpha和beta值在0-45之间（当前15属于合理范围，可保留）

• 确保DOM容器已加载：Angular 18中如果使用了异步渲染或信号绑定，需在ngAfterViewInit钩子中初始化图表，保证chartcontainer元素已存在于DOM中。

// 先导入3D模块
import * as Highcharts from 'highcharts';
import highcharts3D from 'highcharts/highcharts-3d';

highcharts3D(Highcharts);

// 在ngAfterViewInit中初始化图表
ngAfterViewInit() {
  this.myChart = Highcharts.chart({
    chart: {
      renderTo: "chartcontainer",
      type: "bar",
      backgroundColor: "rgba(255,255,255,0)",
      width: 600,
      height: 400,
      options3d: {
        enabled: true,
        alpha: 15,
        beta: 15,
        depth: 50,
        axisLabelPosition: "auto",
        viewDistance: 50, // 调整viewDistance避免裁剪
      },
      spacingTop: 10,
    },
    noData: {
      style: {
        fontWeight: "bold",
        fontSize: "15px",
      },
    },
    title: {
      text: this.chart_settings.title_setting.show_title
        ? !this.emptyChartData
          ? this.chart_settings.title_setting.title_name
          : " "
        : " ",
      style: {
        color: "#000000",
        fontWeight: "normal",
        fontSize: "24px",
        fontStyle: "none",
        textDecoration: "none",
        "font-family": "Roboto-Regular, sans-serif",
      },
      align: "center",
      verticalAlign: "top",
    },
    credits: {
      enabled: false,
    },
    legend: {
      enabled: true,
      itemStyle: {
        color: "#000000",
        cursor: "pointer",
        fontSize: "13px",
        textDecoration: "none",
        textOverflow: "ellipsis",
        fontWeight: "normal",
        fontStyle: "none",
        "font-family": "Roboto-Regular, sans-serif",
      },
      align: "center",
      verticalAlign: "bottom",
      alignColumns: false,
      navigation: {
        enabled: false,
      },
      symbolRadius: 100,
      symbolHeight: 12,
      symbolWidth: 12,
    },
    xAxis: {
      visible: true,
      gridLineColor: "#e6e6e6",
      gridLineWidth: 1,
      categories: ["Item1", "Item2", "Item3", "Item4", "Item5"],
      crosshair: true,
      lineWidth: 0,
      labels: {
        style: {
          color: "#000000",
          cursor: "default",
          fontSize: "13px",
          fontWeight: "normal",
          fontStyle: "none",
          textDecoration: "none",
          "font-family": "Roboto-Regular, sans-serif",
        },
        format: "{value}",
      },
    },
    yAxis: {
      visible: true,
      gridLineColor: "#e6e6e6",
      gridLineWidth: 1,
      reversedStacks: false,
      lineWidth: 0,
      min: 0,
      title: {
        text: "",
      },
      labels: {
        style: {
          color: "#000000",
          cursor: "default",
          fontSize: "13px",
          fontWeight: "normal",
          fontStyle: "none",
          textDecoration: "none",
          "font-family": "Roboto-Regular, sans-serif",
        },
        format: "{value}",
      },
    },
    plotOptions: {
      bar: {
        stacking: "normal",
        pointPadding: 0,
        borderWidth: 0,
        depth: 25, // 修复未定义变量问题
        edgeColor: "rgba(0,0,0,0.05)",
        edgeWidth: 1,
        groupZPadding: 40,
      },
      series: {
        animation: false,
        dataLabels: {
          enabled: true,
          style: {
            fontSize: "13px",
            fontWeight: "normal",
            color: "#000000",
            textOutline: "none",
            textShadow: false,
            fontStyle: "none",
            textDecoration: "none",
            "font-family": "Roboto-Regular, sans-serif",
          },
          format: "{y}",
        },
      },
    },
    series: dataSeries,
  });
}

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