Plotly.js 教程

欢迎来到 Plotly.js 教程页面！这里我们将带你一步步了解如何使用 Plotly.js 创建交互式图表。Plotly.js 是一个强大的 JavaScript 库，可以轻松地在网页上创建各种类型的图表。

快速开始

首先，你需要确保你的网页中已经引入了 Plotly.js 库。你可以通过以下代码来实现：

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

创建基本图表

以下是一个简单的示例，展示如何使用 Plotly.js 创建一个基本的折线图：

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  type: 'scatter'
};

var data = [trace1];

Plotly.newPlot('myDiv', data);

在上面的代码中，我们创建了一个名为 trace1 的对象，它包含了图表的数据和类型。然后，我们将这个对象添加到 data 数组中，并使用 Plotly.newPlot 函数创建图表。

交互式图表

Plotly.js 支持创建交互式图表，用户可以通过鼠标悬停、点击等方式与图表进行交互。以下是一个交互式散点图的示例：

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  mode: 'markers',
  marker: {
    size: 12,
    color: 'blue'
  }
};

var data = [trace1];

var layout = {
  title: '交互式散点图',
  xaxis: { title: 'X 轴' },
  yaxis: { title: 'Y 轴' }
};

Plotly.newPlot('myDiv', data, layout);

在这个示例中，我们为散点图添加了标题和轴标签，并且设置了标记的大小和颜色。

扩展阅读

如果你想要更深入地了解 Plotly.js，可以参考以下资源：

• Plotly.js 官方文档
• Plotly.js 示例

希望这个教程能帮助你快速上手 Plotly.js！😊