ng 2-charts使用chartjs。Angular版本是8.2.14。我必须显示条形图,但它们必须从Y轴而不是X轴开始。意味着图表应该从y轴开始增长。实现这一点的方法是什么?
s5a0g9ez1#
您必须在配置选项中将Chart的type定义为horizontalBar:
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
1条答案
按热度按时间s5a0g9ez1#
您必须在配置选项中将Chart的
type
定义为horizontalBar
:或用于ng 2-charts的TypeScript:
牢记
水平条形图的配置选项与条形图相同。
但是,条形图中x轴上指定的任何选项都将应用于水平条形图中的y轴。
以下是Stackblitz的一个例子:https://stackblitz.com/edit/ng2-charts-bar-template-vqunbc
参考Chart.js文档:https://www.chartjs.org/docs/latest/charts/bar.html#horizontal-bar-chart