1

我只是在 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);



    }
}
4

1 回答 1

0

在您的 HTML 中，添加 config 属性。

nvd3[options]="options" [data]="data" [config]="configVariable" >

在您的 javascript 文件中，创建配置变量，如 let configVariable = { refreshDataOnly: true };

有关更多选项，您可以按照此处的文档进行操作， http: //krispo.github.io/angular-nvd3/#/quickstart

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

于 2018-06-03T15:16:46.273 回答