使用Plotly.js创建交互式图表第2部分：折线图

在本系列的Plotly.js 入门教程中，为您提供了一份快速入门指南，其中简要介绍了库中可用的所有功能、捆绑包和图表类型。如果您还没有阅读该教程，我建议您至少阅读一次，以大致了解 Plotly.js 库。

在本教程中，您将学习如何在 Plotly 中创建折线图。过去，我还写了另一个系列，关于一个名为 chart.js 的轻量级库，可用于在javascript中创建基于画布的图表。在一个标题为Chart.js 入门：折线图和条形图的教程中，我介绍了使用 Chart.js 创建折线图的过程。阅读过该教程的人可能会记得，您必须将属性设置为才能在 Chart.js 中创建折线图。typeline

使用 Plotly.js，您无法将type属性设置line为创建折线图。您必须将type属性设置为scatter，然后将mode属性设置为"lines"、"lines+markers"或"lines+markers+text"。记住这一点，让我们开始学习本教程并创建一些很棒的折线图。

创建基本折线图

在本节中，我们将scatter使用 Plotly 以折线图的形式绘制两条不同的轨迹。该代码与我们在上一教程中使用单条迹线创建折线图的代码非常相似。这是实际的代码：

var lineDiv = document.getElementById('line-chart');

var traceA = {
  x: [1, 5, 13, 24, 35, 46, 60],
  y: [80, 40, 70, 65, 15, 75, 49],
  type: 'scatter'
};

var traceB = {
  x: [4, 9, 17, 21, 31, 42, 56],
  y: [64, 81, 3, 49, 25, 17, 26],
  type: 'scatter'
};

var data = [traceA, traceB];

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

Plotly.plot( lineDiv, data, layout );

使用Plotly.js创建交互式图表第2部分：折线图第1张

使用不同的属性设置图表线条的样式

此时，我们图表中的所有内容都已使用默认选项创建。本教程的其余部分将向您展示如何使用scatter类型跟踪可用的所有属性来创建自定义折线图。更改绘制线外观的选项都在该line键下可用。

可以使用color键指定线条的颜色。您还可以使用该width属性来控制线条的宽度。宽度以像素为单位指定，默认值为 2。

shape可以使用该属性指定正在绘制的不同点之间的线的形状。形状是linear默认的，但您也可以将其设置为spline、vh、hv、hvh或vhv。当shape设置为linear时，连接两个连续点的直线中没有折弯。在、、和的情况下vh，线条永远不会以一定角度绘制。它们可以是水平的，也可以是垂直的，根据指定的形状值，可以在第一个点、第二个点、中点或这两个点处发生 90 度弯曲。 hvhvhvhv

最后一个选项是将设置shape为spline。在这种情况下，这条线实际上变成了一条曲线，没有急弯。这条曲线的平滑度可以借助另一个名为的属性来设置smoothing。此属性可以接受 0 到 1.3 之间的任何值（包括 0 和 1.3）。linear将其设置为零将导致像值一样的直线。下面是一些使用所有这些属性在图表上绘制五条不同线的代码：

var lineDiv = document.getElementById('line-chart');

var traceLinear = {
  x: [1, 5, 13, 24, 35, 46, 60],
  y: [180, 160, 170, 165, 175, 175, 149],
  type: 'scatter',
  name: 'Linear Shape',
  line: {
    shape: 'linear',
    color: 'rgb(255, 157, 98)'
  }
};

var traceSpline = {
  x: [1, 5, 13, 24, 35, 46, 60],
  y: [150, 130, 140, 135, 145, 145, 119],
  type: 'scatter',
  name: 'Spline Shape',
  line: {
    shape: 'spline',
    color: 'rgb(157, 255, 98)'
  }
};

var traceVH = {
  x: [1, 5, 13, 24, 35, 46, 60],
  y: [120, 100, 110, 105, 115, 115, 89],
  type: 'scatter',
  name: 'VH Shape',
  line: {
    shape: 'vh',
    color: 'rgb(157, 98, 255)'
  }
};

var traceHVH = {
  x: [1, 5, 13, 24, 35, 46, 60],
  y: [90, 70, 80, 75, 85, 85, 59],
  type: 'scatter',
  name: 'HVH Shape',
  line: {
    shape: 'hvh',
    color: 'rgb(98, 157, 255)'
  }
};

var traceSplineB = {
  x: [1, 5, 13, 24, 35, 46, 60],
  y: [60, 40, 50, 45, 55, 55, 29],
  type: 'scatter',
  name: 'Spline Shape (1.3)',
  line: {
    shape: 'spline',
    smoothing: 1.3,
    color: 'rgb(255, 98, 157)'
  }
};

var data = [traceLinear, traceSpline, traceVH, traceHVH, traceSplineB];

var layout = {
  title:'Different Shapes of a Line Chart',
  yaxis: {
    rangemode: 'tozero'
  }
};

Plotly.plot( lineDiv, data, layout );

shape下面的折线图显示了属性的不同值之间的差异。我使用参数为name每一行分配不同的名称，以便您可以清楚地看到每个值创建的形状。

使用Plotly.js创建交互式图表第2部分：折线图第2张

绘制绘图线时可以使用的另一个参数是dash参数。您可以将此参数设置为字符串值，以便为您的线条设置破折号样式。此属性的有效值为：solid、dot、dash、longdash、dashdot和longdashdot。

另一种选择是使用像“4px、4px、10px”这样的像素值列表自己提供破折号长度。以下演示使用不同的 dash 属性值来创建独特的线条样式。

使用Plotly.js创建交互式图表第2部分：折线图第3张

设置填充颜色和标记

默认情况下，图表中绘制线下方的区域保持透明，但如果您愿意，可以使用您选择的颜色填充它。这可以通过使用fill参数来实现。默认设置为none，但其他有效值包括tozeroy、tozerox、tonexty、tonextx、toself和tonext。

该值tozeroy将填充从线迹到的所有区域y=0。同样，该值tozerox将填充从线迹到的所有区域x=0。tonexty和tonextx 值填充当前迹线的端点与其之前的迹线之间的所有区域。当没有其他痕迹留下时，这些值将分别表现得像tozeroy和tozerox。您可以使用这两个值来创建堆叠图。

顾名思义，该值toitself将迹线的端点相互连接起来，形成一个封闭的形状。tonext仅当一条迹线完全包围另一条迹线时，最后一个值才会填充两条迹线之间的所有可用空间。

默认情况下 fill，根据可用性，使用线条颜色、标记颜色或标记线颜色的半透明变体填充由参数值指定的区域。但是，您可以使用参数指定自己的颜色来填充该区域fillcolor。

默认情况下，表示图形上绘制点的点使用圆圈标记。Plotly.js 还提供了很多其他的标记符号供您选择。大约有 44 种不同的标记符号，几乎所有这些符号都有四种不同的版本。您可以在文档中找到所有这些符号的列表。标记还具有opacity、size和color参数，可让您控制这些符号的不透明度、大小和颜色。默认值为opacity1，默认值为size6。

这是一个小代码，它使用本节中的所有参数来创建带有填充区域和非圆形标记的折线图：

var lineDiv = document.getElementById('line-chart');

var traceA = {
  x: [1, 8, 13, 24, 35, 46, 60],
  y: [180, 150, 210, 165, 175, 185, 220],
  type: 'scatter',
  name: 'marker: circle',
  fill: 'tonexty',
  marker: {
    symbol: 'circle',
    size: 10
  }
};

var traceB = {
  x: [1, 8, 13, 24, 35, 46, 60],
  y: [130, 120, 160, 135, 145, 145, 119],
  type: 'scatter',
  name: 'marker: diamond',
  fill: 'tonexty',
  marker: {
    symbol: 'diamond',
    size: 10
  }
};

var traceC = {
  x: [1, 8, 13, 24, 35, 46, 60],
  y: [110, 100, 105, 100, 115, 85, 95],
  type: 'scatter',
  name: 'marker: pentagon',
  fill: 'tonexty',
  marker: {
    symbol: 'pentagon',
    size: 12
  }
};

var traceD = {
  x: [1, 8, 13, 24, 35, 46, 60],
  y: [70, 80, 60, 85, 75, 50, 59],
  type: 'scatter',
  name: 'marker: star',
  fill: 'tonexty',
  marker: {
    symbol: 'star',
    size: 12
  }
};

var traceE = {
  x: [1, 8, 13, 24, 35, 46, 60],
  y: [30, 20, 30, 15, 55, 15, 30],
  type: 'scatter',
  name: 'dash: 4px, 4px, 10px',
  fill: 'tonexty',
  marker: {
    symbol: 'bowtie',
    size: 12
  }
};

var data = [traceE, traceD, traceC, traceB, traceA];

var layout = {
  title:'Dash values for a Line Chart',
  xaxis: {
    rangemode: 'tozero'
  },
  yaxis: {
    rangemode: 'tozero'
  }
};

Plotly.plot( lineDiv, data, layout );

当使用给定颜色填充不同轨迹之间的区域时，您需要记住，所有这些参数都根据轨迹提供给plot()函数的顺序填充轨迹区域，而不是声明轨迹的顺序.

在我们的例子中，traceE是第一个踪迹，在它之前没有踪迹。这意味着该值tonexty有效地变为tozeroy 这次。我们已经过去了traceD，traceE所以这两条迹线之间的所有点都会用的颜色填充traceD。如果我们traceA先通过，那么填充区域将从顶部一直延伸到y=0. 在某些情况下，这可能不是一个理想的结果。因此，您应该始终牢记传递痕迹的顺序。