Plotly.js 教程

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

快速开始

首先，你需要确保你的 HTML 文件中包含了 Plotly.js 库。你可以通过以下链接下载或通过 CDN 引入：

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

创建一个简单的散点图

下面是一个简单的散点图示例：

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

var data = [trace1];

Plotly.newPlot('myDiv', data);

这段代码将在页面中创建一个名为 myDiv 的元素，并在其中显示一个散点图。

交互式图表

Plotly.js 支持多种交互式功能，例如缩放、平移、点击事件等。你可以通过修改图表配置来启用这些功能。

例如，以下代码将启用图表的缩放和平移功能：

var trace1 = {
  x: [1, 2, 3, 4, 5],
  y: [10, 11, 12, 13, 14],
  mode: 'markers',
  type: 'scatter',
  hoverinfo: 'text',
  text: ['A', 'B', 'C', 'D', 'E']
};

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

var data = [trace1];

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

Plotly.js 教程

快速开始

创建一个简单的散点图

交互式图表

更多资源