Plotly JavaScript 教程

欢迎来到 Plotly JavaScript 教程页面！在这里，你将学习如何使用 Plotly.js 创建交互式图表。Plotly.js 是一个强大的 JavaScript 库，可以让你在网页上创建各种类型的图表，包括散点图、折线图、柱状图、饼图等。

快速开始

安装 Plotly.js
首先，你需要将 Plotly.js 添加到你的项目中。你可以通过以下命令来安装：
```
npm install plotly.js
```
或者，如果你使用的是 <script> 标签，可以直接从 CDN 加载：
```
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
```
创建图表
一旦 Plotly.js 被添加到你的项目中，你就可以开始创建图表了。以下是一个简单的散点图示例：
```
var trace = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  mode: 'markers',
  type: 'scatter'
};

var data = [trace];

Plotly.newPlot('myDiv', data);
```
在这个例子中，我们创建了一个包含一个散点图的图表，并将其放置在 ID 为 myDiv 的 HTML 元素中。

定制图表
Plotly.js 提供了丰富的选项来定制你的图表。你可以设置图表的标题、轴标签、图例、颜色、标记样式等。

例如，以下是如何设置图表标题和轴标签：

var trace = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  mode: 'markers',
  type: 'scatter',
  name: '散点图'
};

var layout = {
  title: '我的第一个 Plotly 图表',
  xaxis: { title: 'X 轴' },
  yaxis: { title: 'Y 轴' }
};

var data = [trace];

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

扩展阅读

想要了解更多关于 Plotly.js 的信息，请访问我们的官方文档。