文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Angular中重新设置Plotly图形的样式

问如何在Angular中重新设置Plotly图形的样式
EN

Stack Overflow用户

提问于 2019-05-22 22:18:45

回答 1查看 1.1K关注 0票数 1

我在一个自定义的角度组件中有一个绘图图形：

<plotly-plot [data]="graph.data" [layout]="graph.layout" (hover)="onHover($event)">
</plotly-plot>

我还有一个滑块，我想用它来重新设置绘图的样式：

<mat-slider
 thumbLabel
 [displayWith]="formatLabel"
 tickInterval="1000"
 min="0"
 max="7000"
 (input)="getSliderVal($event)">
</mat-slider>

目前我正在注册滑块更改事件，并重新绘制整个图形，这是低效的。我看到在docs中有(restyle)属性，但我不知道如何使用它。感谢任何人的帮助！

发布于 2019-05-23 01:36:58

我想我已经找到了一种方法。在plotly.js docs中，指定以以下方式使用.restyle()：

var update = {
    opacity: 0.4,
    'marker.color': 'red'
};
Plotly.restyle(graphDiv, update, 0);

因此，如果您使用的是Angular，则需要通过[divId]指定绘图div ID，如下所示：

<plotly-plot [data]="graph.data" [layout]="graph.layout" (hover)="onHover($event)" [divId]="embeddingsPlotID">

其中embeddingsPlotID是在组件中指定的。然后，您可以像这样调用.restyle()：

PlotlyModule.plotlyjs.restyle("embeddingsPlot",{"marker.size":event.value},0)

从您的父组件。可悲的是，在我的情况下，这似乎不是一个很大的加速相比，整个情节(我有cca。3k分)

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56258982

复制

相似问题

问如何在Angular中重新设置Plotly图形的样式EN