Height of plot is 0 until resize after changing layout input
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 38/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- angular, typescript
- 领域
- frontend
调研方向
从 Angular 模板的 组件以及由主题信号更新的布局输入开始。重现主题切换，然后在不调整窗口大小的情况下，比较更新前后的图表容器高度。完成标准是：responsive 图表在布局更改后立即保持其实际容器高度。
由索引模型根据 Issue 内容生成。
描述
Hello,
I'm having a bit of trouble with my charts in a dashboard. I've implemented theme switching in my application using system variables and Angular Material. I'm able to change my chart's look and feel according to the colors of my theme. However, the container will collapse when I switch to a new theme because the plotly-plot element has a height of 0 until I resize the window.
Injectable
import { DOCUMENT } from '@angular/common';
import {
computed,
effect,
inject,
InjectionToken,
signal,
} from '@angular/core';
import { WA_WINDOW } from '@ng-web-apis/common';
export const THEME = new InjectionToken('Theme', {
factory: () => {
const w = inject(WA_WINDOW);
const d = inject(DOCUMENT);
const darkMode = signal(true);
const setDarkMode = effect(() =>
d.documentElement.classList.toggle('light', !darkMode())
);
return {
darkMode,
textColor: computed(() => {
darkMode();
return getComputedStyle(d.documentElement).getPropertyValue(
'--mat-app-text-color'
);
}),
};
},
});
Component
...
readonly #theme = inject(THEME);
readonly ageGenderChartLayout = computed<Partial<Plotly.Layout>>(() => ({
barmode: 'stack',
autosize: true,
margin: {
l: 60,
r: 50,
b: 100,
t: 50,
pad: 4,
},
title: 'People by Age',
paper_bgcolor: 'rgba(255,255,255,0)',
plot_bgcolor: 'rgba(255,255,255,0)',
font: {
color: this.#theme.textColor(),
},
}));
...
Template
<mat-card>
<mat-card-content>
@if (mapData$ | async; as mapData) {
<plotly-plot [data]="mapData"
[layout]="mapLayout()"
[config]="{responsive: true, mapboxAccessToken: mapboxToken, displaylogo: false, modeBarButtonsToRemove: ['toImage']}" />
} @else {
<mat-spinner style="margin: auto;"></mat-spinner>
}
</mat-card-content>
</mat-card>
Before switching themes:
After switching themes (which updates the layout input of the plotly-plot component):
How can I have responsive charts while still have their containers "see" their actual height? is this a Plotly chart issue?
- 主要语言
- TypeScript
- 星标
- 242
- 派生
- 81
- 平均合并
- 23 小时 52 分钟
- 30 天内合并 PR
- 5
环境准备
这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
plotly/angular-plotly.js 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 76/100
plotly/angular-plotly.js#373 ·
维护者通常 1 天内回复
-
Feature request: please add migration guide可能已有人在做 @andrefarzat 于 21 天前认领。 未关闭
难度 3/5 1-2 天 新手友好度 45/100
plotly/angular-plotly.js#285 · 3 条评论 ·
维护者通常 1 天内回复
-
event handlers are not typed可能已有人在做 @andrefarzat 于 21 天前认领。 未关闭
难度 3/5 1-2 天 新手友好度 38/100
plotly/angular-plotly.js#283 ·
维护者通常 1 天内回复
-
Angular 20 standalone application可能已有人在做 @andrefarzat 于 21 天前认领。 未关闭
难度 3/5 1-2 天 新手友好度 35/100
plotly/angular-plotly.js#281 · 8 条评论 · 2 个 reaction ·
维护者通常 1 天内回复
-
难度 3/5 1-2 天 新手友好度 25/100
plotly/angular-plotly.js#278 · 2 条评论 · 1 个 reaction ·
维护者通常 1 天内回复
查看 plotly/angular-plotly.js 的全部 Issue
相似的 Issue
-
needs investigation
难度 2/5 1-3 小时 新手友好度 60/100
-
难度 2/5 1-3 小时 新手友好度 72/100
维护者通常 1 天内回复
-
area:visualizer tech-debt
难度 2/5 1 小时以内 新手友好度 66/100
jmbarzee/temporal-architect#292 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 66/100
riverqueue/river#1576 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 70/100
colbymchenry/codegraph#3228 ·
维护者通常 1 天内回复