Plotly Uncaught TypeError：无法读取 HTMLCanvasElement 处未定义的属性“键”

Posted 2023-02-18

技术标签:

【中文标题】Plotly Uncaught TypeError：无法读取 HTMLCanvasElement 处未定义的属性“键”【英文标题】：Plotly Uncaught TypeError: Cannot read property 'key' of undefined at HTMLCanvasElement 【发布时间】：2021-06-10 09:39:21 【问题描述】：

我已经使用 px.scatter_matrix() 生成了一个散点矩阵

import plotly.express as px
df = px.data.iris()
fig = px.scatter_matrix(df,
    dimensions=["sepal_width", "sepal_length", "petal_width", "petal_length"],
    color="species")
fig.show()

fig.write_html("/.../scattermatrix.html",
include_plotlyjs="cdn")

然后：

用 Chrome 打开文件 scattermatrix.html 保存文件以创建 scattermatrixV2.html 打开新保存的 scattermatrixV2.html

新保存的闪现进入视图和消散器：

我可以看到以下错误：

VM5129 plotly-latest.min.js.download:61 Uncaught TypeError: Cannot read property 'key' of undefined
    at HTMLCanvasElement.<anonymous> (VM6 plotly-latest.min.js.download:61)
    at o (VM6 plotly-latest.min.js.download:20)
    at Array.Y.data (VM6 plotly-latest.min.js.download:20)
    at e (VM6 plotly-latest.min.js.download:61)
    at Object.c.syncOrAsync (VM6 plotly-latest.min.js.download:61)
    at Object.r.plot (VM6 plotly-latest.min.js.download:61)
    at Object.r.newPlot (VM6 plotly-latest.min.js.download:61)
    at characterization.php.html:785
(anonymous) @ VM5129 plotly-latest.min.js.download:61
o @ VM5129 plotly-latest.min.js.download:20
Y.data @ VM5129 plotly-latest.min.js.download:20
e @ VM5129 plotly-latest.min.js.download:61
c.syncOrAsync @ VM5…

我只对 Plotly 绘图有这个问题：散点矩阵和 go.Figure(data=go.Parcoords..，而我生成的其他绘图 (px.parallel_categories, go.Figure() & fig.add_trace(go .Scatter...) 它工作正常。

这似乎与Uncaught TypeError: Cannot read property 'keys' of undefined 相似，但我不确定在哪里申请：“使用 Object.keys(uniqVisitorDeviceType) 代替。”

这里是散点矩阵V1原始文件：

<html>
<head><meta charset="utf-8" /></head>
<body>
    <div>
        
                <script type="text/javascript">window.PlotlyConfig = MathJaxConfig: 'local';</script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>    
            <div id="4cadf67b-95de-4ee0-824e-ab5b83efea70" class="plotly-graph-div" style="height:100%; width:100%;"></div>
            <script type="text/javascript">
                
                    window.PLOTLYENV=window.PLOTLYENV || ;
                    
                if (document.getElementById("4cadf67b-95de-4ee0-824e-ab5b83efea70")) 
                    Plotly.newPlot(
                        '4cadf67b-95de-4ee0-824e-ab5b83efea70',
                        ["diagonal": "visible": false, "dimensions": ["axis": "matches": true, "label": "sepal width", "values": [3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.1, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3], "axis": "matches": true, "label": "sepal length", "values": [5.1, 4.9, 4.7, 4.6, 5.0, 5.4, 4.6, 5.0, 4.4, 4.9, 5.4, 4.8, 4.8, 4.3, 5.8, 5.7, 5.4, 5.1, 5.7, 5.1, 5.4, 5.1, 4.6, 5.1, 4.8, 5.0, 5.0, 5.2, 5.2, 4.7, 4.8, 5.4, 5.2, 5.5, 4.9, 5.0, 5.5, 4.9, 4.4, 5.1, 5.0, 4.5, 4.4, 5.0, 5.1, 4.8, 5.1, 4.6, 5.3, 5.0], "axis": "matches": true, "label": "petal width", "values": [0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.1, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2], "axis": "matches": true, "label": "petal length", "values": [1.4, 1.4, 1.3, 1.5, 1.4, 1.7, 1.4, 1.5, 1.4, 1.5, 1.5, 1.6, 1.4, 1.1, 1.2, 1.5, 1.3, 1.4, 1.7, 1.5, 1.7, 1.5, 1.0, 1.7, 1.9, 1.6, 1.6, 1.5, 1.4, 1.6, 1.6, 1.5, 1.5, 1.4, 1.5, 1.2, 1.3, 1.5, 1.3, 1.5, 1.3, 1.3, 1.3, 1.6, 1.9, 1.4, 1.6, 1.4, 1.5, 1.4]], "hoverlabel": "namelength": 0, "hovertemplate": "species=setosa<br>%xaxis.title.text=%x<br>%yaxis.title.text=%y", "legendgroup": "species=setosa", "marker": "color": "#636efa", "symbol": "circle", "name": "species=setosa", "showlegend": true, "type": "splom", "diagonal": "visible": false, "dimensions": ["axis": "matches": true, "label": "sepal width", "values": [3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8], "axis": "matches": true, "label": "sepal length", "values": [7.0, 6.4, 6.9, 5.5, 6.5, 5.7, 6.3, 4.9, 6.6, 5.2, 5.0, 5.9, 6.0, 6.1, 5.6, 6.7, 5.6, 5.8, 6.2, 5.6, 5.9, 6.1, 6.3, 6.1, 6.4, 6.6, 6.8, 6.7, 6.0, 5.7, 5.5, 5.5, 5.8, 6.0, 5.4, 6.0, 6.7, 6.3, 5.6, 5.5, 5.5, 6.1, 5.8, 5.0, 5.6, 5.7, 5.7, 6.2, 5.1, 5.7], "axis": "matches": true, "label": "petal width", "values": [1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3], "axis": "matches": true, "label": "petal length", "values": [4.7, 4.5, 4.9, 4.0, 4.6, 4.5, 4.7, 3.3, 4.6, 3.9, 3.5, 4.2, 4.0, 4.7, 3.6, 4.4, 4.5, 4.1, 4.5, 3.9, 4.8, 4.0, 4.9, 4.7, 4.3, 4.4, 4.8, 5.0, 4.5, 3.5, 3.8, 3.7, 3.9, 5.1, 4.5, 4.5, 4.7, 4.4, 4.1, 4.0, 4.4, 4.6, 4.0, 3.3, 4.2, 4.2, 4.2, 4.3, 3.0, 4.1]], "hoverlabel": "namelength": 0, "hovertemplate": "species=versicolor<br>%xaxis.title.text=%x<br>%yaxis.title.text=%y", "legendgroup": "species=versicolor", "marker": "color": "#EF553B", "symbol": "diamond", "name": "species=versicolor", "showlegend": true, "type": "splom", "diagonal": "visible": false, "dimensions": ["axis": "matches": true, "label": "sepal width", "values": [3.3, 2.7, 3.0, 2.9, 3.0, 3.0, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3.0, 2.5, 2.8, 3.2, 3.0, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3.0, 2.8, 3.0, 2.8, 3.8, 2.8, 2.8, 2.6, 3.0, 3.4, 3.1, 3.0, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3.0, 2.5, 3.0, 3.4, 3.0], "axis": "matches": true, "label": "sepal length", "values": [6.3, 5.8, 7.1, 6.3, 6.5, 7.6, 4.9, 7.3, 6.7, 7.2, 6.5, 6.4, 6.8, 5.7, 5.8, 6.4, 6.5, 7.7, 7.7, 6.0, 6.9, 5.6, 7.7, 6.3, 6.7, 7.2, 6.2, 6.1, 6.4, 7.2, 7.4, 7.9, 6.4, 6.3, 6.1, 7.7, 6.3, 6.4, 6.0, 6.9, 6.7, 6.9, 5.8, 6.8, 6.7, 6.7, 6.3, 6.5, 6.2, 5.9], "axis": "matches": true, "label": "petal width", "values": [2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8], "axis": "matches": true, "label": "petal length", "values": [6.0, 5.1, 5.9, 5.6, 5.8, 6.6, 4.5, 6.3, 5.8, 6.1, 5.1, 5.3, 5.5, 5.0, 5.1, 5.3, 5.5, 6.7, 6.9, 5.0, 5.7, 4.9, 6.7, 4.9, 5.7, 6.0, 4.8, 4.9, 5.6, 5.8, 6.1, 6.4, 5.6, 5.1, 5.6, 6.1, 5.6, 5.5, 4.8, 5.4, 5.6, 5.1, 5.1, 5.9, 5.7, 5.2, 5.0, 5.2, 5.4, 5.1]], "hoverlabel": "namelength": 0, "hovertemplate": "species=virginica<br>%xaxis.title.text=%x<br>%yaxis.title.text=%y", "legendgroup": "species=virginica", "marker": "color": "#00cc96", "symbol": "circle", "name": "species=virginica", "showlegend": true, "type": "splom"],
                        "dragmode": "select", "legend": "tracegroupgap": 0, "template": "data": "bar": ["error_x": "color": "#2a3f5f", "error_y": "color": "#2a3f5f", "marker": "line": "color": "#E5ECF6", "width": 0.5, "type": "bar"], "barpolar": ["marker": "line": "color": "#E5ECF6", "width": 0.5, "type": "barpolar"], "carpet": ["aaxis": "endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f", "baxis": "endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f", "type": "carpet"], "choropleth": ["colorbar": "outlinewidth": 0, "ticks": "", "type": "choropleth"], "contour": ["colorbar": "outlinewidth": 0, "ticks": "", "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "contour"], "contourcarpet": ["colorbar": "outlinewidth": 0, "ticks": "", "type": "contourcarpet"], "heatmap": ["colorbar": "outlinewidth": 0, "ticks": "", "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "heatmap"], "heatmapgl": ["colorbar": "outlinewidth": 0, "ticks": "", "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "heatmapgl"], "histogram": ["marker": "colorbar": "outlinewidth": 0, "ticks": "", "type": "histogram"], "histogram2d": ["colorbar": "outlinewidth": 0, "ticks": "", "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2d"], "histogram2dcontour": ["colorbar": "outlinewidth": 0, "ticks": "", "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2dcontour"], "mesh3d": ["colorbar": "outlinewidth": 0, "ticks": "", "type": "mesh3d"], "parcoords": ["line": "colorbar": "outlinewidth": 0, "ticks": "", "type": "parcoords"], "pie": ["automargin": true, "type": "pie"], "scatter": ["marker": "colorbar": "outlinewidth": 0, "ticks": "", "type": "scatter"], "scatter3d": ["line": "colorbar": "outlinewidth": 0, "ticks": "", "marker": "colorbar": "outlinewidth": 0, "ticks": "", "type": "scatter3d"], "scattercarpet": ["marker": "colorbar": "outlinewidth": 0, "ticks": "", "type": "scattercarpet"], "scattergeo": ["marker": "colorbar": "outlinewidth": 0, "ticks": "", "type": "scattergeo"], "scattergl": ["marker": "colorbar": "outlinewidth": 0, "ticks": "", "type": "scattergl"], "scattermapbox": ["marker": "colorbar": "outlinewidth": 0, "ticks": "", "type": "scattermapbox"], "scatterpolar": ["marker": "colorbar": "outlinewidth": 0, "ticks": "", "type": "scatterpolar"], "scatterpolargl": ["marker": "colorbar": "outlinewidth": 0, "ticks": "", "type": "scatterpolargl"], "scatterternary": ["marker": "colorbar": "outlinewidth": 0, "ticks": "", "type": "scatterternary"], "surface": ["colorbar": "outlinewidth": 0, "ticks": "", "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "surface"], "table": ["cells": "fill": "color": "#EBF0F8", "line": "color": "white", "header": "fill": "color": "#C8D4E3", "line": "color": "white", "type": "table"], "layout": "annotationdefaults": "arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": 1, "coloraxis": "colorbar": "outlinewidth": 0, "ticks": "", "colorscale": "diverging": [[0, "#8e0152"], [0.1, "#c51b7d"], [0.2, "#de77ae"], [0.3, "#f1b6da"], [0.4, "#fde0ef"], [0.5, "#f7f7f7"], [0.6, "#e6f5d0"], [0.7, "#b8e186"], [0.8, "#7fbc41"], [0.9, "#4d9221"], [1, "#276419"]], "sequential": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "sequentialminus": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "colorway": ["#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52"], "font": "color": "#2a3f5f", "geo": "bgcolor": "white", "lakecolor": "white", "landcolor": "#E5ECF6", "showlakes": true, "showland": true, "subunitcolor": "white", "hoverlabel": "align": "left", "hovermode": "closest", "mapbox": "style": "light", "paper_bgcolor": "white", "plot_bgcolor": "#E5ECF6", "polar": "angularaxis": "gridcolor": "white", "linecolor": "white", "ticks": "", "bgcolor": "#E5ECF6", "radialaxis": "gridcolor": "white", "linecolor": "white", "ticks": "", "scene": "xaxis": "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white", "yaxis": "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white", "zaxis": "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white", "shapedefaults": "line": "color": "#2a3f5f", "ternary": "aaxis": "gridcolor": "white", "linecolor": "white", "ticks": "", "baxis": "gridcolor": "white", "linecolor": "white", "ticks": "", "bgcolor": "#E5ECF6", "caxis": "gridcolor": "white", "linecolor": "white", "ticks": "", "title": "x": 0.05, "xaxis": "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": "standoff": 15, "zerolinecolor": "white", "zerolinewidth": 2, "yaxis": "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": "standoff": 15, "zerolinecolor": "white", "zerolinewidth": 2, "title": "text": "Scatter matrix of iris data set",
                        "responsive": true
                    )
                ;
                
            </script>
        </div>
</body>
</html>

尝试@Mark H 解决方案后进行编辑。

建议的解决方案有效。我们也发现了这个问题：

保存使用 Chrome 打开的绘图时，Chrome 更改了第 8 行的内容（您会看到 _saved 版本更长，并且添加了许多属性），因此破坏了 Plotly 图：原第 8 行：

       <div id="4cadf67b-95de-4ee0-824e-ab5b83efea70" class="**plotly-graph-div**" style="height:100%; width:100%;"></div>

从 Chrome 保存后，它会改变类： 注意类的变化，我相信是这样的

<div id="4cadf67b-95de-4ee0-824e-ab5b83efea70" class="**plotly-graph-div js-plotly-plot**" style="height:100%; width:100%;">...

将上面的 div 更改为下面的可以解决问题：

 <div id="4cadf67b-95de-4ee0-824e-ab5b83efea70" class="**plotly-graph-div**" style="height:100%; width:100%;"></div>

通过仅将该行恢复到原始版本，情节正常运行

【问题讨论】：

【参考方案1】：

我会说跳过 Chrome 步骤并用 plotly 输出它。

fig.write_html("/.../scattermatrixV2.html",include_plotlyjs=True)

然而，这将在 HTML 中嵌入 plotly javascript，这将使其超过 3.3 MB .

如果您要大量导出到同一个文件夹，您可以像以前一样保存 html，然后进行更改，从而显着降低磁盘使用率

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

到

<script src="plotly-latest.min.js"></script>`

plotly-latest.min.js 是您本地的 plotly javascript 副本，您可以使用 curl 命令获得：

curl get https://cdn.plot.ly/plotly-latest.min.js > plotly-latest.min.js

要替换脚本行，您可以将其添加到您的脚本中，如下所示：

with open('scattermatrix.html','rt') as f:
  contents = f.read()

contents = contents.replace("https://cdn.plot.ly/plotly-latest.min.js","plotly-latest.min.js",1)

with open('scattermatrixV2.html','wt') as f:
  f.write(contents)

【讨论】：

谢谢！这个解决方案有效。我相信这个问题与 Chrome 如何更改类有关，因此即使通过 chrome 保存然后更改它的工作。

以上是关于Plotly Uncaught TypeError：无法读取 HTMLCanvasElement 处未定义的属性“键”的主要内容，如果未能解决你的问题，请参考以下文章

Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerText') in OpenWetherMa

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'fingerprint') Laravel Live

如何解决问题：Uncaught (in promise) TypeError: promisify is not a function？

Uncaught TypeError

Uncaught TypeError: Cannot redefine property: $router

Uncaught TypeError: o.block is not a function