时间戳

首页 > 解决方案 > Angular Highcharts 径向条形图未按预期工作

angular - Angular Highcharts 径向条形图未按预期工作

问题描述

您好，我有一个应用程序在一个项目中使用 highcharts 我想显示一个图表，但它并没有达到我的预期。我的演示在这里我想要径向条形图，它是链接 但给出了正常的极坐标图。这是我的图表选项

 chartOptions = {
    chart: {
      type: "column",
      inverted: true,
      polar: true,
      backgroundColor: null,
      plotShadow: false,
      plotBorderWidth: null,
      plotBackgroundColor: null
    },
    pane: { size: "85%", innerSize: "20%", endAngle: 270 },
    xAxis: { categories: ["Coorparate", "Plant1", "Plant2"] },
    title: "",
    plotOptions: {
      column: {
        stacking: "normal",
        borderWidth: 0,
        pointPadding: 0,
        groupPadding: 0.15
      }
    },
    series: [
      {
        name: "ISCI",
        type: "column",
        data: [
          { y: 7, name: "", info: "" },
          { y: 28, name: "", info: "" },
          { y: 14, name: "", info: "" }
        ]
      },
      {
        name: "ISVEREN",
        type: "column",
        data: [
          { y: 0, name: "", info: "" },
          { y: 0, name: "", info: "" },
          { y: 0, name: "", info: "" }
        ]
      }
    ]
  };

标签： angularhighcharts

解决方案

您使用了 Highcharts v7.1.1，而径向条形图是在 v8.0.0 中添加的。更新 Highcharts 版本解决了这个问题。

现场演示： https ://stackblitz.com/edit/angular7-playground-nvw5jr?file=src/app/app.component.ts

变更日志： https ://www.highcharts.com/blog/changelog/#highcharts-v8.0.0

推荐阅读