86 lines
2.1 KiB
HTML
86 lines
2.1 KiB
HTML
<!--
|
|
Plotly 需要用 iframe 嵌套在页面中的原因:
|
|
最下面那个代码，在项目里渲染不正常。
|
|
但是新建一个 vue3 项目，直接在 App.vue 里那样子写，却能正常渲染。
|
|
-->
|
|
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Plotly 图表的 HTML 页面</title>
|
|
<!-- <script src="https://cdn.plot.ly/plotly-3.0.1.js"></script> -->
|
|
<script src="./plotly-3.0.1.js"></script>
|
|
<!-- https://github.com/plotly/plotly.js/blob/master/dist/README.md#to-include-localization -->
|
|
<script src="./plotly-locale-zh-cn.js"></script>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
<style>
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden; /* 防止滚动条出现 */
|
|
}
|
|
|
|
/* 确保容器占满整个 iframe */
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</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>
|
|
-->
|