我在角度4应用程序中实现了直方图高图。我基本上想要启用传说切换。因此,在任何一个时间点,都会启用一个图例,这意味着只应启用该图例的系列。切换工作完全正常,但直方图第一次加载时显示在所选系列上绘制的褪色背景。请注意,只要我点击图例,系列就会很好地加载。我想问题是系列没有正确设置为可见false。但是我尝试添加5个系列,其中包含直方图和数据。所以在所有循环10次设置系列的可见性。 |我需要考虑设置直方图和数据对象的可见性 有人能告诉我问题是什么吗?
这就是它现在的样子
这应该是
这就是系列如何绑定直方图。如果你看到下面的每个系列都会包含直方图对象和数据对象。
@Input() set endingResults(value: Array<EndingSurplus>) {
let objHistogram;
let objectData;
this.results = value;
this.chartSeries1 = value.map((element, idx) => {
objHistogram = {
name: element.strategyName,
color: element.strategyColor,
type: 'histogram',
xAxis: 1,
yAxis: 1,
baseSeries: 's' + idx,
zIndex: -1,
binWidth: Math.round((Math.max.apply(null, element.data) - Math.min.apply(null, element.data)) / 40)
};
objectData = {
name: 'Data' + idx,
showInLegend: false,
data: element.data,
id: 's' + idx,
};
this.chartSeries[2 * idx] = objHistogram;
this.chartSeries[2 * idx + 1] = objectData;
if (this.endingHistogramChart) this.endingHistogramChart.redraw();
});
}
请仔细查看重绘方法中的逻辑
redraw() {
if (!this.chart) return;
let seriesLength = this.chart.series.length;
for (let i = seriesLength - 1; i > -1; i--) {
this.chart.series[i].remove();
}
this.series.map(s => {
if (s !== null) {
this.chart.addSeries(s,false);
}
});
for (let i = 0; i < this.chart.series.length; i++) {
if (i > 1) {
this.chart.series[i].setVisible(false, false);
} else {
this.chart.series[i].setVisible(true, true);
this.chart.series[i].showInLegend = true;
}
}
this.chart.redraw();
}
直方图组件
import { Component, Input } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'histogramchart',
template: '<chart [options]="options" (load)="getInstance($event.context)"></chart>',
styles: [`
chart{
display: block;
width: 100% !important;
padding:0;
}
`]
})
export class HistogramChartComponent {
public options: any;
chart: any;
@Input() public series: any;
constructor(private _translate: TranslateService) {
this.options = {
credits: {
enabled: false
},
title: {
text: ''
},
chart: {
type: 'histogram'
},
legend: {
layout: 'horizontal',
margin: 25,
itemMarginTop: 0,
symbolRadius: 0,
symbolHeight: 20,
symbolWidth: 20,
useHTML: true,
title: {
text: this._translate.instant('CAPTIVES.RESULTS.COMMON.GRAPH_LEGEND_TITLE') + ' ',
margin: 50,
style: {
fontStyle: 'italic',
fontWeight: 'normal',
margin: 20
}
},
align: 'right',
verticalAlign: 'bottom',
},
plotOptions: {
series: {
events: {
legendItemClick: function() {
for (let i = 0; i < this.chart.series.length; i++) {
if (this.chart.series[i].index !== this.index) {
this.chart.series[i].setVisible(false, false);
} else {
this.chart.series[i].setVisible(true, false);
}
}
this.chart.redraw();
return false;
}
}
}
},
xAxis: [{
title: { text: '' },
alignTicks: false
}, {
title: { text: this._translate.instant('CAPTIVES.RESULTS.ESA.GRAPH_XAXIS') },
alignTicks: false,
}],
yAxis: [{
title: { text: '' }
}, {
title: { text: this._translate.instant('CAPTIVES.RESULTS.ESA.GRAPH_YAXIS') },
}],
series: [{
showInLegend: false
}]
};
}
getInstance(chartInstance): void {
this.chart = chartInstance;
this.redraw();
}
ngOnChanges(data: any) {
if (!data.series.currentValue || !this.chart) return;
data.series.currentValue.map(s => {
this.chart.addSeries(s);
});
this.chart.reflow();
}
redraw() {
if (!this.chart) return;
let seriesLength = this.chart.series.length;
for (let i = seriesLength - 1; i > -1; i--) {
this.chart.series[i].remove();
}
this.series.map(s => {
if (s !== null) {
this.chart.addSeries(s,false);
}
});
for (let i = 0; i < this.chart.series.length; i++) {
if (i > 1) {
this.chart.series[i].setVisible(false, false);
} else {
this.chart.series[i].setVisible(true, true);
this.chart.series[i].showInLegend = true;
}
}
this.chart.redraw();
}
}