Я нуб в angular. У меня уже есть компонент гистограммы, и я использую этот компонент в нескольких местах проекта. Теперь я хочу реализовать горизонтальную гистограмму, изменив компонент гистограммы, но я застрял в этой точке и не двигаюсь вперед. здесь нет ошибок и ниже кода, реализующего нормальную гистограмму Заранее спасибо
компонент гистограммы
dataCtx: any;
bar_chart: any;
@ViewChild('barChart') barChartRef: ElementRef;
@Input() data = [];
@Input() type: string;
@Input() hoverData: Array<string>;
@Input() yLabel: any;
@Input() xLabel: any;
@Input() label?: string;
@Input() barLabel?: string;
@Input() nameObj?: any;
@Input() showLabel: boolean;
@Input() charType: string;
color = [];
@Output() onSegClick = new EventEmitter<any>();
colors: Array<string> = ["rgba(98, 228, 98, 1)", "rgba(248, 227, 117, 1)", "rgba(250, 99,131, 1)", 'red', 'blue', 'violet', 'orange'];
constructor() { }
ngOnInit() {
}
ngAfterViewInit() {
this.renderChart();
}
ngOnChanges() {
if (this.barChartRef)
this.renderChart();
}
renderChart() {
let self = this;
this.dataCtx = this.barChartRef.nativeElement.getContext('2d');
let gradient_1 = this.dataCtx.createLinearGradient(0, 0, 0, 250);
gradient_1.addColorStop(0, ' #c4743e');
gradient_1.addColorStop(1, 'transparent');
let gradient_2 = this.dataCtx.createLinearGradient(0, 0, 0, 250);
gradient_2.addColorStop(0, 'beige');
gradient_2.addColorStop(1, 'transparent');
let gradient_3 = this.dataCtx.createLinearGradient(0, 0, 0, 250);
gradient_3.addColorStop(0, '#2f7ca7');
gradient_3.addColorStop(1, "transparent");
this.bar_chart = new Chart(this.dataCtx, {
type: this.charType || 'bar',
data: {
labels: this.nameObj.map(obj => obj.name),
datasets: this.setChartData()
},
options: {
legend: {
display: this.showLabel,
labels: {
padding: 20,
fontStyle: 'bold',
fontSize: 16,
}
},
title: {
display: this.label ? true : false,
text: this.label,
fontStyle: 'bold',
fontSize: 20,
},
showAllTooltips: true,
toolTips: {
mode: 'index',
intersect: true
},
scales: {
xAxes: [{
categoryPercentage: 0.65,
// barPercentage: 1.0,
// barThickness: 50,
maxBarThickness: 50,
display: true,
scaleLabel: {
display: true,
fontStyle: 'bold',
labelString: this.yLabel
},
ticks: {
autoSkip: false
},
gridLines: {
color: 'rgba(88, 88, 88, 0.35)',
lineWidth: 2.5
}
}],
yAxes: [{
// stacked: true,
display: true,
scaleLabel: {
display: true,
fontStyle: 'bold',
labelString: this.xLabel
},
ticks: {
min: 0,
max: 100,
},
gridLines: {
color: 'rgba(0, 78, 162, 0.5)',
lineWidth: 0.5
}
}]
},
responsive: true,
onClick: function (evt, arr) {
if (arr[0]) {
self.onSegClick.emit(arr[0]._index);
}
},
}
});
}
cohortProf(options) {
let cohortData = [{
data: this.data.map(coh => Math.floor(coh.proficiency * 100)),
backgroundColor: '#0080FF',
options
}]
return cohortData;
}
testData() {
let testData = [];
this.data.forEach((d, i) => {
let val = Math.floor(d.data * 100);
testData.push(val);
this.color.push('#' + (Math.random() * 0xFFFFFF << 0).toString(16));
// this.color.push('hsl('+ val +', 100%, 50%)')
});
return testData;
}
testProf(options) {
let testData = [{
data: this.testData(),
backgroundColor: this.color,
options
}]
return testData;
}
subjectProf(options) {
let subData = [];
let strat = this.hoverData;
this.data.filter((d, index) => { subData.push({ "data": d, "backgroundColor": this.colors[index], options, label: strat[index] }) });
return subData;
}
setChartData() {
let dataSet: any;
let fixed_options = {
borderColor: 'tranparent',
borderWidth: 2,
pointBorderColor: 'transparent',
pointBackgroundColor: 'transparent',
pointHoverBackgroundColor: "#fff",
pointHighlightFill: "#fff",
pointRadius: 3,
pointHitRadius: 20,
pointBorderWidth: 1,
};
switch (this.type) {
case 'test': {
dataSet = this.testProf(fixed_options);
break;
}
case 'cohort': {
dataSet = this.cohortProf(fixed_options);
break;
}
case 'grouped-chart': {
dataSet = this.subjectProf(fixed_options);
break;
}
case 'single-bar': {
dataSet = [{
data: this.data,
backgroundColor: this.colors,
label: 'Analytics'
}];
break;
}
default: {
break;
}
}
return dataSet;
}
}
повторное использование одного и того же компонента для реализации горизонтальной гистограммы
horizantalChart = {
data:[[10,20],[30,40]]
}
<bar-chart [type]="'single-bar'" [hoverData]="['Experts Avg. Score', 'Others Avg. Score']" barLabel="Proficiency"
[data]="horizontalChart.data" [nameObj]="uploadAnalytics.analytics" yLabel="Quizzes" chartType="horizontalBar"
[xLabel]="'Average Upload Score'" [showLabel]="true" (onSegClick)="selectBar($event)"></bar-chart>
Вывод кода выглядит следующим образом 