Plotly.js -岩石教程

特点

丰富的图表类型：支持折线图、柱状图、散点图、饼图、热力图、箱线图、漏斗图、地理图表、3D 图表等多种图表类型。
高交互性：图表具有高度的交互性，支持缩放、平移、悬停提示、点击事件等。
高性能：支持 WebGL 绘图，适用于大数据量的高性能可视化。
可定制性强：提供多种配置选项，允许高度定制图表外观和行为。
支持导出：图表可以导出为多种格式，如 PNG、SVG、PDF 等。
开源和商业支持：开源版本功能强大，商业版本提供高级功能和企业级支持。
跨平台支持：兼容所有现代浏览器，支持移动设备和桌面设备。

使用场景

数据分析和展示：适用于各种数据分析和展示需求，如市场分析、销售数据、用户行为分析等。
科研和教育：用于科学研究和教育培训，帮助用户理解数据和分析结果。
商业智能：用于商业智能系统，创建交互式仪表盘，展示关键业务指标。
金融和保险：展示金融数据、风险评估、保险数据等复杂信息。
实时监控：用于实时数据监控和展示，如服务器状态监控、传感器数据监控等。

安装方式

通过 npm 安装 Plotly.js：

npm install plotly.js

通过 CDN 引入 Plotly.js：

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

使用示例

创建一个简单的折线图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Plotly.js Line Chart Example</title>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>
  <script>
    var trace1 = {
      x: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      y: [10, 15, 13, 17, 21, 25, 19],
      type: 'scatter'
    };

    var data = [trace1];

    Plotly.newPlot('chart', data);
  </script>
</body>
</html>

创建一个柱状图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Plotly.js Bar Chart Example</title>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>
  <script>
    var trace1 = {
      x: ['Apples', 'Bananas', 'Cherries', 'Dates', 'Elderberries'],
      y: [5, 10, 2, 8, 7],
      type: 'bar'
    };

    var data = [trace1];

    Plotly.newPlot('chart', data);
  </script>
</body>
</html>

常用 API 介绍

Plotly.newPlot()：创建一个新图表。
```
Plotly.newPlot('chart', data, layout);
```
Plotly.react()：更新现有图表。
```
Plotly.react('chart', data, layout);
```
Plotly.extendTraces()：扩展现有的追踪数据。
```
Plotly.extendTraces('chart', update, [0]);
```

Plotly.relayout()：重新布局图表。

Plotly.relayout('chart', layoutUpdate);

Plotly.redraw()：重新绘制图表。
```
Plotly.redraw('chart');
```

Plotly.update()：更新图表数据和布局。

Plotly.update('chart', dataUpdate, layoutUpdate);

Plotly.addTraces()：添加新的追踪数据。
```
Plotly.addTraces('chart', newTrace);
```
Plotly.deleteTraces()：删除指定的追踪数据。
```
Plotly.deleteTraces('chart', [0, 1]);
```

官方资料

Plotly.js 是一个功能强大且灵活的 JavaScript 图表库，适用于各种数据可视化需求。其丰富的图表类型和配置选项，使得开发者可以创建复杂且交互式的数据可视化图表，提升 Web 应用的数据展示效果。