examples/vue-ts-example
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

fix: 补充 Plotly 嵌套 iframe 的注释和格式
Some checks failed
/ build-and-deploy-to-vercel (push) Successful in 2m56s
Details
/ lint-build-and-check (push) Successful in 5m22s
Details
/ playwright (push) Failing after 11m36s
Details
/ surge (push) Successful in 3m8s
Details

Browse Source
This commit is contained in:
严浩
2025-04-18 14:04:44 +08:00
parent defc842edf
commit 4433f01b81
1 changed files with 49 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
public/iframe/for-plotly.html
View File

@ -1,5 +1,7 @@
<!-- <!--
XXX: Plotly 需要用 iframe 嵌套在页面中的原因: Plotly 需要用 iframe 嵌套在页面中的原因:
最下面那个代码，在项目里渲染不正常。
但是新建一个 vue3 项目，直接在 App.vue 里那样子写，却能正常渲染。
--> -->
<!doctype html> <!doctype html>
<html lang="zh-CN"> <html lang="zh-CN">
@ -13,7 +15,9 @@ XXX: Plotly 需要用 iframe 嵌套在页面中的原因:
<script src="./plotly-locale-zh-cn.js"></script> <script src="./plotly-locale-zh-cn.js"></script>
</head> </head>
<body> <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_spectrogram" style="width: 100%; height: 100%"></div>
<div id="PLOTLY_CHART_waterfall" style="width: 100%; height: 100%"></div> <div id="PLOTLY_CHART_waterfall" style="width: 100%; height: 100%"></div>
</body> </body>
@ -36,3 +40,46 @@ XXX: Plotly 需要用 iframe 嵌套在页面中的原因:
} }
</style> </style>
</html> </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>
-->