用Vue3和Plotly.js生成多折线图

本文由ScriptEcho平台提供技术支持

项目地址：传送门

基于 Plotly.js 的交互式折线图绘制

应用场景介绍

本代码示例展示了如何使用 Plotly.js 库创建交互式折线图。用户可以在图中点击点以添加注释，从而实现数据可视化和探索。此功能可广泛应用于数据分析、科学研究和教育等领域。

代码基本功能介绍

此代码的基本功能是：

• 使用 Plotly.js 绘制三条折线图，每条线对应一个数据集。
• 当用户点击图中的点时，会在该点处添加一个注释，显示点的 x 和 y 坐标。
• 用户可以点击多个点，在图中添加多个注释。

功能实现步骤及关键代码分析

1. 导入 Plotly.js 库

import Plotly from 'plotly.js-dist'

2. 创建数据

生成三个数据集，每个数据集包含 100 个随机正态分布的点。

var y1 = d3.range(N).map(d3.random.normal())
var y2 = d3.range(N).map(d3.random.