需要将第一个系列显示为默认值并在第一次加载时选择

Question

我正在尝试使用角度绘制直方图。下面的 jsfiddle 链接供参考。

http://jsfiddle.net/x51b6pvs/52/

我需要显示选择和显示的第一个系列，其余的被禁用。目前，该行为仅在单击图例时才有效。我曾尝试在加载事件中执行此操作，但该事件似乎没有触发。我怎样才能做到这一点？

角码

import { Component, Input, OnInit } from '@angular/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;


    ngOnInit() {
    }

    constructor() {

        this.options = {
            credits: {
                enabled: false
            },
            title: {
                text: ''
            },
            chart: {
                type: 'histogram'
            },
            legend: {
                align: 'right',
                verticalAlign: 'bottom',
                layout: 'horizontal',
                margin: 25,
                itemMarginTop: 0,
                symbolRadius: 0,
                symbolHeight: 20,
                symbolWidth: 20
            },

            plotOptions: {
                series: {
                    events: {

                    load:function()
                    {
                        this.chart.series[0].setVisible(true,true);
                    },      

                        legendItemClick: function () {
                            for (var 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: 'Ending Surplus' },
                alignTicks: false
            }, {
                title: { text: 'Count of Ending Surplus' },
                alignTicks: false,

            }],

            yAxis: [{
                title: { text: '' }
            }, {
                title: { text: '' },

            }],

            series: [{
                //  type: 'histogram',
                //  xAxis: 1,
                //  yAxis: 1,
                //  zIndex: -1,
                //   baseSeries: 's1',
                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;

        this.series.map(s => {
            if (s != null)
                this.chart.addSeries(s);
        });
    }
}

Answer 1

我已经解决了这个问题。我在组件重绘方法中写了一个for循环

  for (var i = 0; i < this.chart.series.length; i++) {
            if (i != 0 && i != 1) {
                this.chart.series[i].setVisible(false, false);
            }
            else {
                this.chart.series[i].setVisible(true, true);
            }

        }
        this.chart.redraw();