angular 中的 Highcharts 未垂直旋转

Question

我想在 angular 中使用 HighCharts 绘制一个垂直的“条形图”，我做了很多 google 搜索，在那里我发现在图表选项中添加这段代码就可以了,

chart: {
      type: 'column'
    }

或

chart: {
          type: 'bar'
        }

但是试了很多次都不行，请问有什么解决办法吗？这是我的 Highchart 代码，

主-dashboard.ts文件

import * as HighCharts from 'highcharts';
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-main-dashboard',
  templateUrl: './main-dashboard.component.html',
  styleUrls: ['./main-dashboard.component.css']
})
export class MainDashboardComponent implements OnInit {
  highcharts = HighCharts;
  chartOptions: HighCharts.Options = {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Column chart with negative values'
    },
    xAxis: {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    plotOptions: {
      series: {
        stacking: 'normal'
      },
      column: {
        pointPadding: 0,
        borderWidth: 0,
        groupPadding: 0,
        shadow: false
    }
    },
    series: [{
      type: 'bar',
      name: 'John',
      data: [5, 3, 0, 7, 2]
    }, {
      name: 'Jane',
      type: 'bar',
      data: [2, -2, -3, 0, 1]
    }, {
      type: 'bar',
      name: 'Joe',
      data: [0, 4, 4, -2, 5]
    }]
  };
constructor() { }

ngOnInit(): void {
}

}

主-dashboard.component.html文件

<highcharts-chart
   [Highcharts] = "highcharts" 
   [options] = "chartOptions" 
   style = "width: 100%; height: 400px; display: block;">
</highcharts-chart>

它的结果是一个水平条形图，但我想要这个垂直条形图，只是垂直

是否有任何解决方案，请帮助，我的项目需要它。谢谢。

Answer 1

解决了，只需更改series的type:

series: [{
      type: 'column',
      name: 'John',
      data: [5, 3, 0, 7, 2]
    }, {
      name: 'Jane',
      type: 'column',
      data: [2, -2, -3, 0, 1]
    }, {
      type: 'column',
      name: 'Joe',
      data: [0, 4, 4, -2, 5]
    }]

angular 中的 Highcharts 未垂直旋转

Highcharts not rotating to vertical in angular

highcharts

angular

angular-highcharts