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

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