Graphs do not render in PopOS React App
還沒有人認領這個 Issue。
評估
- 難度
- 3/5
- 預估耗時
- 1-2 天
- 新手友好度
- 30/100
- Issue 類型
- 缺陷
- 描述清晰度
- 需要釐清
- 活躍度
- 停滯
- 技術堆疊
- javascript, react
研究方向
從包含三個 元素的 React 元件開始，在所回報的 Pop!_OS 環境中使用 npm start 重現空白圖表。檢查瀏覽器輸出，並判斷 source-map 警告是否與渲染失敗有關。完成標準是硬編碼的圓餅圖能夠清楚顯示，且原因已記錄。
由索引模型根據 Issue 內容生成。
描述
I am making a React app using Plotly connected to a flask backend. However, my graphs only display as white squares that when hovered over display the plotly toolbar.
This is a picture of what it looks like: here
When I use the command npm start, I get this message which might have something to do with it:
WARNING in ./node_modules/plotly.js/dist/plotly.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/david/Programming/Python-Projects/Investment-Hunter-Web/frontend/node_modules/plotly.js/dist/maplibre-gl-unminified.js.map' file: Error: ENOENT: no such file or directory, open '/home/david/Programming/Python-Projects/Investment-Hunter-Web/frontend/node_modules/plotly.js/dist/maplibre-gl-unminified.js.map'
Can anyone help me figure out why my plotly graphs are not displaying at all?
My code seems relatively straightforward as I hard coded the numbers to begin with just to get something going:
import React from 'react';
import Plot from 'react-plotly.js'
function Portfolio() {
const growthPortfolio = [{
values: [19, 26, 55],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie',
hole: 0.4,
}]
const valuePortfolio = [{
values: [30, 40, 30],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie',
hole: 0.4,
}]
const totalPortfolio = [{
values: [45, 35, 20],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie',
hole: 0.4,
}]
return (
<div>
<Plot data={growthPortfolio} />
<Plot data={valuePortfolio} />
<Plot data={totalPortfolio}/>
</div>
);
}
export default Portfolio;
- 主要語言
- JavaScript
- 星號
- 1.1k
- 分支
- 138
- PR 合併指標
- 30 天內沒有已合併 PR
環境準備
這個專案沒有提供開發容器、Dockerfile 或貢獻指南，環境需要你自己搭建：先看它的 README，通用步驟見我們的新手貢獻指南。
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
plotly/react-plotly.js 的其他 Issue
-
P3 plotly-internal size: 1 task
難度 3/5 1-2 天 新手友好度 45/100
plotly/react-plotly.js#386 ·
-
難度 4/5 3-5 天 新手友好度 48/100
plotly/react-plotly.js#358 · 1 則留言 ·
-
難度 4/5 3-5 天 新手友好度 35/100
plotly/react-plotly.js#354 ·
-
難度 4/5 3-5 天 新手友好度 35/100
plotly/react-plotly.js#352 · 1 則留言 ·
-
難度 4/5 3-5 天 新手友好度 25/100
plotly/react-plotly.js#351 ·
查看 plotly/react-plotly.js 的全部 Issue
相似的 Issue
-
good first issue help wanted
難度 1/5 1 小時以內 新手友好度 88/100
modrollstudio/Modroll-Studio-Website#80 · 1 則留言 ·
維護者通常 1 天內回覆
-
good first issue help wanted
難度 1/5 1 小時以內 新手友好度 82/100
-
area: panel enhancement
難度 1/5 1 小時以內 新手友好度 72/100
GabrielGirardi/ledge#7 ·
-
0. Needs triage 35-feedback bug
難度 1/5 1 小時以內 新手友好度 62/100
維護者通常 1 天內回覆
-
A-linter
難度 2/5 1-3 小時 新手友好度 73/100
oxc-project/oxc#28783 ·
維護者通常 1 天內回覆