在 Highchart Angular 18 中无法正确显示带有条形图类型的 3D 图表

Question

在此输入图片描述
版本：“highcharts”：“^11.4.7”，

在下面的代码中，所有其他图表都可以正常工作，但只有 3d 条形图无法正确渲染，简单的条形图也可以正常工作，但是当条形图在 3d 条形图上切换时，就会出现问题。

相同的代码适用于旧包版本并且工作正常。

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,
})

如何正确渲染条形图。

Answer 1

问题是因为 3d 行图表动画和动画期间 html2Canvas 图像捕获图像以及该图像显示在画布中，这就是问题所在，所以我禁用了动画然后正确工作