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

在本系列的Plotly.js入门教程中，向您提供了快速入门指南 ，该指南简要介绍了库中可用的所有功能，捆绑销售商品和图表类型。 如果您尚未阅读该教程，建议您至少阅读一遍，以全面了解Plotly.js库。

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

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

创建基本折线图

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

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 );

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

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

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

可以使用shape属性指定要绘制的不同点之间的线的shape 。 默认情况下，形状是linear的，但是您也可以将其设置为spline ， vh ， hv ， hvh或vhv 。 将shape设置为linear ，连接两个连续点的linear上没有弯曲。 对于vh ， hv ， hvh和vhv ，线条永远不会成角度地绘制。 它们可以是水平或垂直的，并且在90°弯曲处可能会在第一个点，第二个点，中点或两个点上发生，具体取决于指定的形状值。

最后一个选项是将shape设置为spline 。 在这种情况下，该线实际上是一条曲线，没有急剧的弯曲。 可以借助另一个称为“ smoothing属性来设置此曲线的平滑度。 此属性可以接受0到1.3之间的任何值。 将其设置为零将产生类似于linear值的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参数为每行分配不同的名称，以便您可以清楚地看到由每个值创建的形状。

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

另一种选择是使用像素值列表（例如“ 4px，4px，10px”）自己提供短划线长度。 下面的演示使用dash属性的不同值来创建唯一的线条样式。

设置填充颜色和标记

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

值tozeroy将填充从线迹到y=0所有区域。 类似地，值tozerox将填充从线迹到x=0所有区域。 tonexty和tonextx值将填充当前迹线的端点与之前的迹线之间的所有区域。 如果没有其他迹线，这些值将分别充当tozeroy和tozerox 。 您可以使用这两个值来创建堆叠图。

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

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

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

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

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 。 在某些情况下，这可能不是理想的结果。 因此，您应始终牢记传递跟踪的顺序。

结论

在本教程中，您学习了如何使用Plotly.js创建折线图。 本教程的不同部分讨论了各种自定义选项，例如设置线条的形状，颜色和宽度。

您还了解了不同的标记符号以及Plotly.js提供的可用于进一步定制折线图的填充选项。 我在这里仅介绍了一些主要属性，但您可能应该了解一些其他属性，例如showlegend和hoverinfo 。 您可以在Plotly网站上的“ 散布参考”部分下阅读所有这些属性。

在本系列的下一个教程中，您将学习如何在Plotly中创建条形图。 如果您有关于本教程的任何问题或提示，请随时在评论中分享。

翻译自: https://code.tutsplus.com/tutorials/create-interactive-charts-using-plotlyjs-line-charts--cms-29201