要创建一个自定义的水平柱状图,可以使用Angular 8和Chart.js库。以下是一个示例解决方案:
首先,确保已经安装了Angular CLI并创建了一个新的Angular项目。
在项目中安装Chart.js库。可以使用以下命令:
npm install chart.js --save
ng generate component horizontal-bar-chart
horizontal-bar-chart.component.ts
文件,并导入Chart.js库:import { Component, OnInit } from '@angular/core';
import { Chart } from 'chart.js';
ngOnInit
生命周期钩子中调用该方法:export class HorizontalBarChartComponent implements OnInit {
chart: any;
ngOnInit() {
this.renderChart();
}
renderChart() {
this.chart = new Chart('horizontalBarChart', {
type: 'horizontalBar',
data: {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [{
label: 'Data',
data: [10, 20, 30],
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
}
horizontal-bar-chart.component.html
中添加一个canvas
元素,用于显示水平柱状图:
在父组件中,使用
标签来显示水平柱状图组件。
运行Angular项目,并查看水平柱状图是否正确显示。
这样就可以使用Angular 8和Chart.js创建一个自定义的水平柱状图。根据实际需求,可以根据Chart.js文档调整水平柱状图的样式和选项。