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

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夹中的文件。

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

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

npm install plotly.js --save

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

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

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

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

从版本 1.15 开始，您可以从不同的部分捆绑包中进行选择，每个捆绑包都允许您创建特定的图表类型。有七个不同的包：basic、cartesian、geo、gl3d、gl2d、mapbox和Finance。您可以使用以下行获取这些捆绑包的 CDN 链接：

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

如果您只需要从单个 bundle 中绘制图表，您可以使用此方法显着减小文件大小。以下是关于它们中的每一个的一些附加信息。

basic : 这个包包含scatter,bar和pietrace 模块。此捆绑包的压缩和缩小版本的大小为 215.7 kB。
Cartesian：这个包包含scatter, bar, box, heatmap, , , , ,和trace 模块。此捆绑包的压缩和缩小版本的大小为 238.2 kB。 histogramhistogram2dhistogram2dcontourpiecontourscatterternary
geo：此捆绑包允许您在 JavaScript 中创建不同类型的地图相关图表。此捆绑包的压缩和缩小版本的大小为 224.1 kB。
gl3d：此捆绑包允许您使用、和 trace 模块创建不同类型scatter的scatter3d3D地图surface。mesh3d此捆绑包的压缩和缩小版本的大小为 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 创建图表

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

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

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 属性，可以用来完全自定义图表的外观和行为。

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

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

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

正如您在演示中看到的那样，您可以放大、缩小或自动缩放图表。您也可以将图表下载为图像。图表本身以其清晰的线条看起来非常专业。

自定义图表的布局属性

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

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

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

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

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

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

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

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

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

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创建交互式图表第1部分：入门第2张