ChartJS 如何在charjs中显示y轴上条形图

brjng4g3  于 2023-10-18  发布在  Chart.js
关注(0)|答案(1)|浏览(162)

ng 2-charts使用chartjs。Angular版本是8.2.14。我必须显示条形图,但它们必须从Y轴而不是X轴开始。意味着图表应该从y轴开始增长。实现这一点的方法是什么?

s5a0g9ez

s5a0g9ez1#

您必须在配置选项中将Chart的type定义为horizontalBar

var myBarChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: options
});

或用于ng 2-charts的TypeScript:

public barChartType: ChartType = 'horizontalBar';

牢记
水平条形图的配置选项与条形图相同。
但是,条形图中x轴上指定的任何选项都将应用于水平条形图中的y轴
以下是Stackblitz的一个例子:https://stackblitz.com/edit/ng2-charts-bar-template-vqunbc

export class AppComponent  {
  public barChartOptions: ChartOptions = {
    responsive: true,
  };
  public barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  public barChartType: ChartType = 'horizontalBar';
  public barChartLegend = true;
  public barChartPlugins = [];

  public barChartData: ChartDataSets[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
  ];

  constructor() { }

  ngOnInit() {
  }
}

参考Chart.js文档:https://www.chartjs.org/docs/latest/charts/bar.html#horizontal-bar-chart

相关问题