使用Plotly.js创建交互式图表，第1部分：入门


在名为Chart.js入门的系列文章中 ，您学习了如何使用Chart.js轻松创建基于画布的响应式图表。 该系列涵盖了图书馆提供的七种基本图表类型。 但是，可能需要您创建具有其他功能的更复杂的图表，以使这些图表具有交互性。

Plotly.js是创建各种响应式，交互式且功能丰富的图表的最佳免费库之一 。 在本系列中，您将学习如何使用Plotly.js创建各种图表，包括折线图，条形图，气泡图和点图图。

为什么要使用Plotly.js？

Plotly.js提供了许多使值得学习库的功能。 它是在d3.js和stack.gl之上构建的高级声明性库。 这是使Plotly成为最佳JavaScript图表库之一的功能列表：

  • 您可以使用Plotly.js轻松创建交互式图表。 您使用该库创建的任何图表都具有放大，缩小，平移，自动缩放等功能。当您要研究具有大量绘制点的图表时，这些功能非常有用。 所有这些事件都在API中公开，因此您可以编写自定义代码以在触发任何这些事件时执行自己的操作。
  • 绘制大量点时的高性能使Plotly.js成为您必须绘制大量数据的理想选择。 由于大多数图表都是使用SVG创建的，因此您可以在各种浏览器中获得很好的兼容性，并可以导出任何图表的高质量图像。 但是，在DOM中绘制大量SVG元素可能会对性能产生不利影响。 该库使用stack.gl创建高性能2D和3D图表。
  • 您创建的任何3D图表都将在WebGL的帮助下呈现，以充分利用GPU必须提供的所有功能。
  • 所有的Plotly.js图表??都是完全可定制的。 可以使用一组JSON属性来自定义颜色，标签，网格线和图例等所有内容。 您将在本系列的下三个部分中学习如何自定义不同的图表类型。

剧情安装

在开始使用Plotly.js之前，我们需要先安装它。 有很多不同的方法来安装库。

您可以使用以下命令直接克隆库，然后使用dist文件夹中的文件。

1
git clone https://github.com/plotly/plotly.js.git

另一种选择是通过运行以下命令来使用npm执行安装：

1
npm install plotly.js --save

您还可以使用Plotly.js CDN并直接链接到该库。 通常，您希望使用库的最新版本的经过编译和缩小的文件。 但是，您也可以链接到CDN中特定版本的库。 这是一个例子：

1
2
3
4
<script type="text/javascript" src="//i2.wp.com/cdn.plot.ly/plotly-latest.min.js"></script>

<!-- Install a specific version -->
<script type="text/javascript" src="//i2.wp.com/cdn.plot.ly/plotly-1.9.0.min.js"></script>

在编写本教程时，该库的最新版本为1.28.3。 最小化和压缩库后的文件大小为666 kB。 未缩小且未压缩的版本的大小为5.4 MB。 如您所见，该库提供的一长串功能是有代价的。

从1.15版开始，您可以从不同的部分捆绑中选择，每个捆绑都可以创建特定的图表类型。 有七个不同的捆绑包： 基本 ， 笛卡尔 ， 地理 ， gl3d ， gl2d ， mapbox和finance 。 您可以使用以下行获取这些捆绑软件的CDN链接：

1
2
3
4
5
6
7
https://cdn.plot.ly/plotly-bundleName-latest.min.js

// Therefore the basic bundle becomes:
https://cdn.plot.ly/plotly-basic-latest.min.js

// and the cartesian bundle becomes:
https://cdn.plot.ly/plotly-cartesian-latest.min.js

如果只需要从单个捆绑包中绘制图表，则可以使用此方法来大大减小文件大小。 这是有关它们每个的一些附加信息。

  • basic ：此捆绑软件包含scatter ， bar和pie跟踪模块。 该捆绑包的压缩版本和缩小版本的大小为215.7 kB。
  • 笛卡尔笛卡尔 ：此捆绑包包含scatter ， bar ， box ， heatmap ， histogram ， histogram2d ， histogram2dcontour ， pie ， contour和scatterternary跟踪模块。 该捆绑包的压缩版本和缩小版本的大小为238.2 kB。
  • geo ：此捆绑包使您可以在JavaScript中创建不同类型的与地图相关的图表。 该捆绑包的压缩版本和缩小版本的大小为224.1 kB。
  • gl3d ：此捆绑包使您可以使用scatter ， scatter3d ， surface和mesh3d跟踪模块创建不同类型的3D地图。 此捆绑包的压缩版本和缩小版本的大小为354 kB。
  • gl2d：软件包中包含scatter ， scattergl ， pointcloud ， heatmapgl ， contourgl和parcoords跟踪模块。 经过压缩和缩小后，其大小为362.9 kB。
  • mapbox ：此捆绑包包含scatter和scattermapbox跟踪模块。 在这种情况下，文件大小为328.6 kB。
  • 财务 ：财务捆绑包可用于创建时间序列，烛台和其他图表类型以绘制财务数据。 该模块由scatter ， bar ， histogram ， pie ， ohlc和candlestick跟踪模块组成。

使用图解创建图表

一旦确定了要创建的图表并将适当的捆绑包加载到网页中，就可以使用Plotly.js开始创建自己的图表。 您需要做的第一件事是在应该绘制图形的地方创建一个空的div元素。

准备好一些要在图表上绘制的数据。 在此示例中，我仅使用一些随机数来创建图表。 最后，您必须调用plot()函数，并向其提供所有信息，例如容器div ，数据和布局选项。 这是创建基本折线图的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var lineDiv = document.getElementById('line-chart');

var traceA = {
  x: [1, 2, 3, 4, 16, 17, 26],
  y: [1, 40, 9, 60, 4, 20, 10],
  type: 'scatter'
};

var data = [traceA];

var layout = {
  title:'A Line Chart in Plotly'
};

Plotly.plot( lineDiv, data, layout );

Plotly.js中的所有图表都是使用JSON对象声明式创建的。 图表的每个属性（如其颜色和数据）都有一个对应的JSON属性，可用于完全自定义图表的外观和行为。

这些属性可以大致分为两类。 第一个称为跟踪 ，它是用于提供有关要在图形上绘制的一系列数据的信息的对象。 第二类是layout ，它提供了不同的属性来控制图表的所有其他方面，例如其标题或注释。 根据图表类型进一步对不同的跟踪进行分类，可用于绘制图表的属性将取决于type属性的值。

在上面的示例中，我们创建了一个traceA对象，该对象存储跟踪类型和要在图表上绘制的数据。 以下CodePen演示显示了以上代码的最终结果。

如在演示中所见，您可以放大，缩小或自动缩放图形。 您还可以将图表下载为图像。 图表本身以其锐利的线条看起来非常专业。

定制图表的布局属性

在本系列的其余教程中，我们将重点学习与特定图表类型（如折线图和条形图）相关的不同属性。 在此之前，您还应该具有不同布局属性的基本知识，这些属性控制所有图表类型（如字体，标题，x轴，y轴等）共有的方面。

您可以指定在创建轨迹和其他布局组件（如轴和标题）时应使用的全局字体。 使用font对象指定选项，并且图表的所有组件默认使用这些值。 color ， size和family键嵌套在font键中。 您可以使用它们分别设置全局字体颜色，全局字体大小和全局字体系列。

每个图表都有一个title属性，可用于设置当前图表的标题。 它为用户提供了有关您在图表上绘制内容的一些信息。 可以使用titlefont属性指定标题的字体属性。 就像全局font属性一样，嵌套在titlefont属性中的color ， size和family键可用于控制标题的字体相关属性。

您可以使用width和height键以像素为单位指定图表的width和height 。 您还可以使用嵌套在margin键下的不同属性来控制图表周围的间距以及绘图区域。 所有值均以像素为单位。

使用l属性指定左侧边距，使用r属性指定右侧边距，使用t属性指定顶部边距，使用b属性指定底部边距。 默认情况下，绘图区域和轴线非常靠近。 您可以使用嵌套在margin键内的pad属性在绘图区域周围添加一些空间。 填充以像素为单位指定，其默认值为零。

您可以为整个图表的背景以及绘图区域选择自己的颜色，以匹配您网站的主题。 这两种颜色默认情况下都设置为白色，但是您可以分别使用paper_bgcolor和plot_bgcolor键为它们指定不同的值。

您还可以为图表中的所有轴指定标题和不同的字体属性。 字体属性嵌套在各个轴的轴键中。 您还可以独立控制轴的基础颜色和用于其标题的字体的颜色。

有时，在图表上绘制的点不会一直下??降到零。 在这种情况下，Plotly在轴上创建的刻度也不会扩展为零。 但是，如果您希望刻度线始终从零开始，无论绘制点的范围如何，都可以使用rangemode属性并将其值设置为tozero 。

下面的代码片段使用了我们刚刚讨论的一些属性来修改在上一节中创建的图表的外观。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var lineDiv = document.getElementById('line-chart');

var traceA = {
  x: [25, 30, 35, 40, 45, 50, 55],
  y: [40, 40, 20, 60, 40, 20, 50],
  type: 'scatter'
};

var data = [traceA];

var layout = {
  title:'A Line Chart in Plotly',
  height: 550,
  font: {
    family: 'Lato',
    size: 16,
    color: 'rgb(100,150,200)'
  },
  plot_bgcolor: 'rgba(200,255,0,0.1)',
  margin: {
    pad: 10
  },
  xaxis: {
    title: 'Distance travelled along x-axis',
    titlefont: {
      color: 'black',
      size: 12
    },
    rangemode: 'tozero'
  },
  yaxis: {
    title: 'Distance travelled along y-axis',
    titlefont: {
      color: 'black',
      size: 12
    },
    rangemode: 'tozero'
  }
};

Plotly.plot( lineDiv, data, layout );

结论

在本教程中，您了解了Plotly.js库的不同功能。 我还介绍了库的安装和使用以及不同的布局属性，以根据您的需要自定义图表的外观。

JavaScript已成为在Web上工作的事实语言之一。 它并非没有学习曲线，并且有许多框架和库也让您忙碌。 如果您正在寻找其他资源来学习或在工作中使用，请查看Envato市场中可用的资源 。

在本系列的其余部分中，您将学习可以使用Plotly创建的不同类型的基本图表。 希望您喜欢本教程，如果有任何疑问或建议，请随时在评论中分享。

翻译自: https://code.tutsplus.com/tutorials/create-interactive-charts-using-plotlyjs-getting-started--cms-29029