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

本文详细介绍了如何使用Plotly.js库创建折线图，包括设置线条样式、填充颜色、标记等。从创建基本折线图开始，逐步讲解如何自定义线的形状、颜色、宽度，以及如何利用填充和标记来增强图表的表现力。同时，强调了线条属性和填充颜色在不同轨迹间的处理方式，以实现更复杂的图表效果。

摘要由CSDN通过智能技术生成

在本系列的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 );