未捕获的类型错误:无法读取 HTMLCanvasElement 处未定义的属性“键" [英] Plotly Uncaught TypeError: Cannot read property 'key' of undefined at HTMLCanvasElement

查看：164
本文介绍了未捕获的类型错误:无法读取 HTMLCanvasElement 处未定义的属性“键"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

import plotly.express as pxdf = px.data.iris()图 = px.scatter_matrix(df,尺寸=[sepal_width"、sepal_length"、petal_width"、petal_length"]、颜色=物种")图.show()fig.write_html("/.../scattermatrix.html",include_plotlyjs="cdn")

然后我:

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

新保存的闪现并消失:

我可以看到以下错误:

VM5129 plotly-latest.min.js.download:61 Uncaught TypeError:无法读取未定义的属性key"在 HTMLCanvasElement.<匿名>(VM6 plotly-latest.min.js.download:61)在 o (VM6 plotly-latest.min.js.download:20)在 Array.Y.data (VM6 plotly-latest.min.js.download:20)在 e (VM6 plotly-latest.min.js.download:61)在 Object.c.syncOrAsync (VM6 plotly-latest.min.js.download:61)在 Object.r.plot (VM6 plotly-latest.min.js.download:61)在 Object.r.newPlot (VM6 plotly-latest.min.js.download:61)在characteristics.php.html:785(匿名)@ VM5129 plotly-latest.min.js.download:61o @ VM5129 plotly-latest.min.js.download:20Y.data @ VM5129 plotly-latest.min.js.download:20e @ VM5129 plotly-latest.min.js.download:61c.syncOrAsync @ VM5…

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

它似乎与 Uncaught TypeError: Cannot read property 类似未定义的键 但是我不确定在哪里应用:使用 Object.keys(uniqVisitorDeviceType) 代替."

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

<head><meta charset="utf-8";/></头><身体><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";样式=高度:100%；宽度:100%;"></div><script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV ||{};如果(document.getElementById(4cadf67b-95de-4ee0-824e-ab5b83efea70")){Plotly.newPlot('4cadf67b-95de-4ee0-824e-ab5b83efea70'，[{对角线":{可见":假}，尺寸":[{轴":{匹配":真}，标签":萼片宽度"，值":[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.3.8, 3.5, 3.3.83.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.0, 3.5, 3.3, 3.3.53.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.2, .5.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.0, 5.5, 4.9, 4.4, 5.0, 5.1, 4.8, 5.1, 4.6, 5.3, {5.quot;quot;}, {5:quot;quot;};: 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.10.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.2, 0.2, 0.2, 0.2, 0.10.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", ";值":[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, .7, 1.0, 1.5, 1.5, 1.51.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.6, 1.6, 1.3, 1.6, 1.11.5, 1.4]}], "hoverlabel": {"namelength": 0}, "hovertemplate": "species=setosa
%{xaxis.title.text}=%{x}
;%{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.5, 2.8, 2.2, .5, 2.8, 2.23.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.7, 2.7, 3.0, .2}, {"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, .7, 5, 5, .5, 6.7, 5.5, .6.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"匹配:{}, "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.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.2, 1.3., 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, 4, 4, 4. 4, 4.9, 4.9, 4.9, 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,1.4, 4, 4, 4, 4, 4, 4, 4, 4.0]，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.3, .2.6, 2.3, .23.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.5, 3.0, 3.0, 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.1, 7, 6. 4, 6, 7, 6. 66.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"匹配:{}, "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.3, 2.2.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, 2.82.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, 4, 6, .54.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.2.5, .5.], 5, 5.4, .5.], 5.5, 4, 5. 5.], "hoverlabel": {"namelength": 0}, "hovertemplate": "species=virginica
%{xaxis.title.text}=%{x}
%{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":{颜色":#2a3f5f"}，error_y":{颜色":#2a3f5f"}，标记":{线":{颜色":#"E5ECF6", "width": 0.5}}, "type": "bar"}], "barpolar": [{"marker": {"line": {"color": ";#E5ECF6"，宽度":0.5}}，类型":barpolar"}]，地毯":[{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，刻度":"}，色阶":[[0.0，#0d0887"]，[0.1111111111111111，#46039f"]，[0.222222222222222222222222222222220.3333333333333333，"#9c179e"]，[0.4444444444444444，"#bd3786"]，[0.5555555555555556，"#d8576b"]，[0.6666666666666666，"#ed7953"]，[0.7777777777777778，"#fb9f3a"]，[0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "contour"}], "contourcarpet": [{"{"colorbar""out0，滴答":"}, "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.666666666666666、#ed7953"]、[0.7777777777777778、#fb9f3a"]、[0.88888888888888888888888888、26666"、26"、2"、0.7777777777777778";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.666666666666666、#ed7953"]、[0.7777777777777778、#fb9f3a"]、[0.88888888888888888888888888、26666"、26"、2"、0.7777777777777778";histogram2d"}], "histogram2dcontour": [{&"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.11111111111111111, "#460]"[0.2222222222222222，"#7201a8"]，[0.3333333333333333，"#9c179e"]，[0.4444444444444444，"#bd3786"]，[0.5555555555555556，"#d8576b"]，[0.6666666666666666，"#ed7953"]，[0.7777777777777778，#fb9f3a"]，[0.8888888888888888，#fdca26"]，[1.0，#f0f921"]]，类型"，tg"，togram"2"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "mesh3d"}], "parcoords": [{"line": {";colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "parcoords"}], "pie": [{"automargin": true,类型":饼"}]，分散":[{";标记":{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":"}}，类型":scattergl"}]，scattermapbox":[{marker":{colorbar":{outlinewidth":0，ticks":"}}，type":scattermapbox"}]，scatterpolar":[{";标记":{colorbar":{outlinewidth":0，ticks":"}}，type":scatterpolar"}]，scatterpolargl":[{";标记":{colorbar":{outlinewidth":0，ticks":"}}，type":scatterpolargl"}]，scatterternary":[{";标记":{colorbar":{outlinewidth":0，ticks":"}}，type":scatterternary"}]，surface":[{";colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#4600]222222222222220, #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":{发散":[[0, #8e0152"], [0.1, #c51b7d"], [0.2, #de7"7ae"]，[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, "#0d0d]887"[0.1111111111111111，"#46039f"]，[0.2222222222222222，"#7201a8"]，[0.3333333333333333，"#9c179e"]，[0.4444444444444444，"#bd3786"]，[0.5555555555555556，"#d8576b"]，[0.666666666666666，#ed7953"]，[0.7777777777777778，#fb9f3a"]，[0.88888888888888888888888888888888888，ca，2#fd"，2#fd"2，quot;0"0"2"0.0"0.77777777777777778，"#0d0887"]，[0.1111111111111111，"#46039f"]，[0.2222222222222222，"#7201a8"]，[0.3333333333333333，"#9c179e"]，[0.4444444444444444，"#bd3786"]，[0.5555555555555556, #d8576b"], [0.6666666666666666, #ed7953"], [0.77777777777777778, "#fb9f3a"]、[0.8888888888888888、#fdca26"]、[1.0、#f0f921"]]}、色彩":[#636efa"、B"、3"00cc96"、#ab63fa"、#FFA15A"、#19d3f3"、#FF6692"、#B6E880"、#FF97FF"、#FECB52":{color":#2a3f5f"}，geo":{bgcolor":white"，lakecolor":white"，landcolor":#E5ECF6"；，showlakes":true，showland":true，subunitcolor":white"}，hoverlabel":{align":left"}，hovermode":;最近"、地图框":{样式":光"}、paper_bgcolor":白色"、plot_bgcolor":#E5ECF6"、极坐标":{angularaxis";: {"gridcolor": "white", "linecolor"ot;: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、《线》color":white"，showbackground":true，ticks":"，zerolinecolor":white"}}，shapedefaults":{line":{";color":#2a3f5f"}}，三元":{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": "", "t标题":{对峙":15}，zerolinecolor":q"uot;white"，zerolinewidth":2}，yaxis":{automargin":true，gridcolor":white"，linecolor":white"，ticks": "", "title": {"standoff": 15}, "zerolinecolor": "white", "zerolinewidth": 2}}}, "title": {"text";:虹膜数据集的散点矩阵"}}，{响应":真实})};

</html>

在尝试@Mark H 解决方案后编辑.

提出的解决方案有效.我们也发现了这个问题:

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

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

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

只需将该行恢复到原始版本，情节就会正常运行

解决方案

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

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

但是，这会将 plotly javascript 嵌入到 HTML 中，这将使它超过 3.3 MB.

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

到

`

其中 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:内容 = f.read()content = contents.replace("https://cdn.plot.ly/plotly-latest.min.js","plotly-latest.min.js",1)with open('scattermatrixV2.html','wt') as f:f.写(内容)

I have generated a scatter matrix using 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")

I then:

  1. Open the file scattermatrix.html with Chrome
  2. Save the file to create scattermatrixV2.html
  3. Open the new saved scattermatrixV2.html

The new saved flashes into view and hten dissapers:

I can see the following error: 

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…

I only have this issue with Plotly plots: scatter matrix and go.Figure(data= go.Parcoords.., while with the other plots i generate (px.parallel_categories, go.Figure() & fig.add_trace(go.Scatter... ) it works fine.

It seems to be simlar to Uncaught TypeError: Cannot read property 'keys' of undefined however i am not sure where to apply: "Use Object.keys(uniqVisitorDeviceType) instead."

Here is the scatter matrix V1 original file:

<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>

EDIT AFTER TRYING @Mark H solution.

The solution proposed works. We have also found the issue:

When saving the plot opened with Chrome, Chrome changes the content in line 8 (you see that the _saved version is much longer and with many added attributes), so breaking the Plotly graph: Original line 8:

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

After saving from Chrome it chanes the class: Notice how the class changes, I believe it is this

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

Changing The div above to the one below fixes the issue:

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

By only restoring that line to the original version the plot regularly works

解决方案

I'd say skip the Chrome step and output it with plotly.

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

However, this will embed the plotly javascript in the HTML, which will make it over 3.3 MB.

If you're going to be exporting a lot to the same folder, you can lower your disk usage significantly by just saving the html like you've been doing, and then changing

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

to

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

Where plotly-latest.min.js is your local copy of the plotly javascript, which you can get with a curl command:

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

To substitute the script lines, you can tack this on to your script like so:

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)

这篇关于未捕获的类型错误:无法读取 HTMLCanvasElement 处未定义的属性“键"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆