Hacktoberfest 2026：維護者為十月標記出來的 issue，仍然開放、適合新手。 瀏覽 Hacktoberfest issue

Bug: Exporting as HTML (New Issues as of v.3.0.1)

未關閉
  • 哪裡不對？
#7,372 3 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

維護者通常 1 天內回覆

還沒有人認領這個 Issue。

評估

難度
4/5
預估耗時
3-5 天
新手友好度
38/100
Issue 類型
缺陷
描述清晰度
需要釐清
活躍度
活躍
技術堆疊
javascript, react
領域
data-visualization, frontend

研究方向

首先，使用提供的 exportAsHTML 函數、受影響的圖表資料和版面配置，以及從 CDN 載入的最新 Plotly 用戶端重現問題。比較原始 React Plotly 圖表與下載的 HTML 輸出，並釐清資料是在匯出過程中還是轉譯過程中遺失或遭到變更。匯出的 HTML 保留圖表資料和形狀即表示完成。

由索引模型根據 Issue 內容生成。

描述

bug P2

Hey, I have been using plotly.js within my react application for several months now.
I never noticed this issue before but my users have started to report the following issue as of today, and I wonder if its linked to the latest release of plotlyjs.

In my React app I'm using a combination of react plotly and plotlyjs for various bits of functionality.

The key bit thats relevant here, is exporting charts as HTML.

Since the js client has no .to_html method like the python client does, I had to do this with a bit of a workaround as suggested by other people online.

// Function to export as HTML
    const exportAsHTML = (chartData: ChartData, fileName: string) => {
        const plotlyScript = `
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        <style>
            body, html {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            #plotly-chart {
                width: 100%;
                height: 100%;
            }
        </style>
        <div id="plotly-chart"></div>
        <script>
            var data = ${JSON.stringify(chartData.data)};
            var layout = ${JSON.stringify(chartData.layout)};
            Plotly.newPlot('plotly-chart', data, layout);
        </script>
        `;
        const blob = new Blob([plotlyScript], { type: 'text/html' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
    };

Basically I'm creating the HTML skeleton myself and passing in the chart data / layout to be read by the embedded plotly client.

Here i'm explicitly importing the latest version of plotlyjs via the <script/> tag

Now as for the results. The html version of the chart is either missing data entirely, or the data has been mutated such that it doesn't match the original chart.

A couple of examples are below.

EXAMPLE A

This chart (plotted using React Plotly)

Image

Becomes the following (missing data entirely)

Image

EXAMPLE B

This chart (plotted using React Plotly)

Image

Becomes the following (shape of data changed drastically)

Image

Obviously this is a major issue and if not fixed could mislead our data analysts.

The only solution i can think of for now is to create a python backend endpoint to take the chart data and layout and use the python libraries to_html function to send back the html, but this seems unnecessarily convoluted.

Now, it could be that I have been taking the wrong approach the whole time, but I'd be surprised if this was the case since the feature has been live for months and has only now been reported as buggy. Hence why I suspect its to do with the latest release (21 hours ago as of writing this)

As a sidenote, why on earth isn't there a built in .to_html method in the javascript client library? The disparity between this and the python library is confusing.

Any guidance is appreciated.

Best,
Pat

主要語言
JavaScript
星號
18.4k
分支
2k
平均合併
2 天 7 小時
30 天內合併 PR
18

環境準備

從這裡開始

  1. 先讀完整個 Issue，再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫，在一個分支上完成修改。
  4. 送出 Pull Request，並在描述裡引用這個 Issue 編號。

plotly/plotly.js 的其他 Issue

查看 plotly/plotly.js 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。