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

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)

Becomes the following (missing data entirely)

---

EXAMPLE B

This chart (plotted using React Plotly)

Becomes the following (shape of data changed drastically)

---

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

首先，使用提供的 exportAsHTML 函数、受影响的图表数据和布局，以及从 CDN 加载的最新 Plotly 客户端重现该问题。将原始 React Plotly 图表与下载的 HTML 输出进行比较，并确定数据是在导出过程中还是渲染过程中丢失或发生变更。导出的 HTML 保留图表数据和形状即表示完成。