我正在使用使用 chartjs 的 ng2-charts。Angular 版本是 8.2.14。我必须显示条形图,但它们必须从 Y 轴而不是 X 轴开始。意味着图形应该从 y 轴开始增长。实现这一目标的方法是什么?
您必须在配置选项中定义type
图表的horizontalBar
:
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: options
});
或 ng2-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
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句