Highcharts没有以角度旋转到垂直答案

【问题标题】：Highcharts not rotating to vertical in angularHighcharts没有以角度旋转到垂直
【发布时间】：2021-07-06 04:03:12
【问题描述】：

我想使用 HighCharts 以角度绘制垂直“条形图”，我已经进行了很多谷歌搜索，我发现在图表选项中添加此代码即可完成，

chart: {
      type: 'column'
    }

或

chart: {
          type: 'bar'
        }

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

main-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 {
}

}

main-dashboard.component.html 文件

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

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

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

【问题讨论】：

标签： angular highcharts angular-highcharts

【解决方案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]
    }]

【讨论】：