Question

我在角度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') + ' &nbsp;',
                    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();
    }
}

直方图高图系列在角度应用中的第一次加载时未正确显示

0 个答案: