fix: 补充 Plotly 嵌套 iframe 的注释和格式

2025-04-18 14:04:44 +08:00
parent defc842edf
commit 4433f01b81
1 changed files with 49 additions and 2 deletions
--- a/public/iframe/for-plotly.html
+++ b/public/iframe/for-plotly.html
@ -1,5 +1,7 @@
 <!--
-XXX: Plotly 需要用 iframe 嵌套在页面中的原因:
+Plotly 需要用 iframe 嵌套在页面中的原因: 
+  最下面那个代码，在项目里渲染不正常。
+  但是新建一个 vue3 项目，直接在 App.vue 里那样子写，却能正常渲染。
 -->
 <!doctype html>
 <html lang="zh-CN">
@ -13,7 +15,9 @@ XXX: Plotly 需要用 iframe 嵌套在页面中的原因:
    <script src="./plotly-locale-zh-cn.js"></script>
  </head>
  <body>
-    <script>Plotly.setPlotConfig({locale: 'zh-CN'})</script>
+    <script>
+      Plotly.setPlotConfig({ locale: 'zh-CN' });
+    </script>
    <div id="PLOTLY_CHART_spectrogram" style="width: 100%; height: 100%"></div>
    <div id="PLOTLY_CHART_waterfall" style="width: 100%; height: 100%"></div>
  </body>
@ -36,3 +40,46 @@ XXX: Plotly 需要用 iframe 嵌套在页面中的原因:
    }
  </style>
 </html>
+
+<!-- 
+<script setup lang="ts">
+import { onMounted, useTemplateRef } from 'vue'
+
+import Plotly from 'plotly.js-dist-min'
+
+const plotRef = useTemplateRef<import('plotly.js-dist-min').PlotlyHTMLElement | null>('plotRef')
+
+// 数据
+const trace1 = {
+  x: [1, 2, 3, 4, 5],
+  y: [2, 4, 1, 5, 3],
+  type: 'scatter',
+} satisfies import('plotly.js-dist-min').Data
+
+const data = [trace1]
+
+// 布局
+const layout = {
+  title: '简单折线图',
+  xaxis: {
+    title: 'X 轴',
+  },
+  yaxis: {
+    title: 'Y 轴',
+  },
+} satisfies Partial<import('plotly.js-dist-min').Layout>
+
+onMounted(async () => {
+  // 绘制图表
+  Plotly.newPlot(plotRef.value!, data, layout)
+
+  plotRef.value?.on('plotly_relayout', (eventData) => {
+    console.debug(`eventData :>> `, eventData)
+  })
+})
+</script>
+
+<template>
+  <div ref="plotRef" style="width: 600px; height: 400px"></div>
+</template> 
+-->