问ng2-nvd3实时折线图更新

EN

    <nvd3[options]="options"[data] = "data" > </nvd3>

export class AppComponent implements OnInit {
    options;
    data;
    chartType;

    ngOnInit() {

        this.options = {
            chart: {
                type: 'lineChart',
                height: 450,
                margin: {
                    top: 20,
                    right: 20,
                    bottom: 40,
                    left: 55
                },
                x: function (d) { return d.x; },
                y: function (d) { return d.y; },
                useInteractiveGuideline: true,
                xAxis: {
                    axisLabel: 'Time (ms)'
                },
                yAxis: {
                    axisLabel: 'Voltage (v)',
                    tickFormat: function (d) {
                        return d3.format('.02f')(d);
                    },
                    axisLabelDistance: -10
                }
            }
        };

        this.sinAndCos();
    }


    sinAndCos() {
        var sin = [], sin2 = [],
            cos = [];

        //Data is represented as an array of {x,y} pairs.
        for (var i = 0; i < 100; i++) {
            sin.push({ x: i, y: Math.sin(i / 10) });
        }

        //Line chart data should be sent as an array of series objects.
        this.data = [
            {
                values: sin,      //values - represents the array of {x,y} data points
                key: 'Sine Wave', //key  - the name of the series.
                color: '#ff7f0e'  //color - optional: choose your own line color.
            }
        ];

        var x = i;
        setInterval(() => {

            this.data[0].values.push({ x: i, y: Math.sin(i / 10), series: 0 })

            i++;
        }, 500);



    }
}