0

我想在角度使用 HighCharts 绘制一个垂直的“条形图”，我已经做了很多谷歌搜索，在那里我发现在图表选项中添加这个代码然后它就会完成，

chart: {
      type: 'column'
    }

或者

chart: {
          type: 'bar'
        }

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

主仪表板.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>

它的结果是一个水平条形图， 在此处输入图像描述 但我想要这个垂直条形图，只是为了垂直 在此处输入图像描述

有什么解决方案吗，请帮忙，我的项目需要它。谢谢。

4

1 回答 1

2

解决了，只需更改typeof series：

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]
    }]
于 2021-07-06T04:54:17.467 回答