Question

我只是在ng2-nvd3的实时折线图更新中苦苦挣扎，我的数据集很好，但是当数据即将到来时，图表没有变化。

请找到解决方案，我们将非常感谢您的帮助。

这是我的Html代码

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

我的Javascript代码

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);



    }
}

Answer 1

在HTML中，添加配置属性。

nvd3 [选项] =＆＃34;选择＆＃34; [数据] =＆＃34;数据＆＃34; [config] =＆＃34; configVariable＆＃34; ＆gt;

在您的javascript文件中，创建配置变量as 让 configVariable = {refreshDataOnly：true};

有关更多选项，请按照此处的文档http://krispo.github.io/angular-nvd3/#/quickstart

进行操作

我知道自问这个问题已经很久了，但我现在回答这个问题，因为上面提到的答案对我有用，可能是目前在这个nvd3库工作的人可能会发现它有帮助的。

ng2-nvd3实时折线图更新

1 个答案: