有人可以说如何在plotly.js的Angular 2+包装器(https://github.com/plotly/angular-plotly.js)中使用Plotly.js的extendTraces功能吗?我无法从网址中提供的文档中找出答案。
相关问题:Plotly update data
****解决方案**** 下面,我更改了原始邮政编码以显示有效的解决方案。方法addPoint和addPoint2(向现有系列添加新的单个数据点)方法addRandomLine()添加新跟踪(即全新的数据系列):
<button (click)="addRandomLine()" class="button">Add random line</button>
<button (click)="addPoint()" class="button">Add point to 1. series</button>
<button (click)="addPoint2()" class="button">Add point with extendTrace to 1. series</button>
<plotly-plot
#chart
id="plotlyChart"
[data]="data"
[layout]="layout">
</plotly-plot>
import { Component, ViewChild } from '@angular/core';
import { PlotlyService } from '../../shared/plotly.service';
export class LinearChartsComponent {
@ViewChild('chart') el: any;
public data: any[] = [
{ x: [1, 2, 3, 4], y: [10, 15, 13, 17], type: 'bar', mode: 'markers', name: 'Bar' },
{ x: [2, 3, 4, 1], y: [16, 5, 11, 9], type: 'scattergl', mode: 'lines', name: 'Lines' },
{ x: [1, 2, 3, 4], y: [12, 9, 15, 12], type: 'markers', mode: 'lines+markers', name: 'Scatter + Lines' },
];
constructor(public plotly: PlotlyService) {
}
public layout: any = {
title: 'Adding Names to Line and Scatter Plot',
};
public addRandomLine() {
const line: any = { x: [], y: [], mode: 'lines', name: 'Line ' + this.data.length };
line.x = [1, 2, 3, 4].map(i => Math.round(Math.random() * 10));
line.y = [1, 2, 3, 4].map(i => Math.round(Math.random() * 20));
line.mode = ['markers', 'lines', 'lines+markers'][Math.floor(Math.random() * 3)] as any;
this.data.push(line);
}
// adds point with relayout-method
addPoint() {
const line: any = this.data[1];
line.x.push(line.x.length + 1);
line.y.push(Math.round(Math.random() * 20));
this.data[1] = line;
const update = {
title: 'New Title',
data: this.data
}
this.plotly.getPlotly().relayout(this.el.plotEl.nativeElement, update);
}
// adds point with extendTraces-method
addPoint2() {
this.plotly.getPlotly().extendTraces(
this.el.plotEl.nativeElement,
{ y: [[Math.random()*10]] }, [1]
);
this.plotly.getPlotly().extendTraces(
this.el.plotEl.nativeElement,
{ x: [[this.data[1].x.length + 1]] }, [1]
);
}
}
答案 0 :(得分:0)
OP 通过编辑原始问题提供了解决方案。 我不会撤消这些编辑并在此处发布完整的解决方案,而是仅添加此解决方案所依赖的 OP 的 plotly-service。
import { Injectable } from '@angular/core';
import { Plotly } from './plotly.interface';
@Injectable({
providedIn: 'root'
})
export class PlotlyService {
protected static instances: Plotly.PlotlyHTMLElement[] = [];
protected static _plotly?: any = undefined;
public static setPlotly(plotly: any) {
PlotlyService._plotly = plotly;
}
public static insert(instance: Plotly.PlotlyHTMLElement) {
const index = PlotlyService.instances.indexOf(instance);
if (index === -1) {
PlotlyService.instances.push(instance);
}
return instance;
}
public static remove(div: Plotly.PlotlyHTMLElement) {
const index = PlotlyService.instances.indexOf(div);
if (index >= 0) {
PlotlyService.instances.splice(index, 1);
}
}
public getInstanceByDivId(id: string): Plotly.PlotlyHTMLElement | undefined {
for (const instance of PlotlyService.instances) {
if (instance && instance.id === id) {
return instance;
}
}
return undefined;
}
public getPlotly() {
if (typeof PlotlyService._plotly === 'undefined') {
throw new Error(`Peer dependency plotly.js isn't installed`);
}
return PlotlyService._plotly;
}
protected waitFor(fn: () => boolean): Promise<void> {
return new Promise((resolve) => {
const localFn = () => {
fn() ? resolve() : setTimeout(localFn, 10);
};
localFn();
});
}
public async newPlot(div: HTMLDivElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>) {
await this.waitFor(() => this.getPlotly() !== 'waiting');
return this.getPlotly().newPlot(div, data, layout, config).then(() => PlotlyService.insert(div as any)) as Promise<any>;
}
public plot(div: Plotly.PlotlyHTMLElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>) {
return this.getPlotly().plot(div, data, layout, config) as Promise<any>;
}
public update(div: Plotly.PlotlyHTMLElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>) {
return this.getPlotly().react(div, data, layout, config) as Promise<any>;
}
public resize(div: Plotly.PlotlyHTMLElement): void {
return this.getPlotly().Plots.resize(div);
}
}