详解plotly.js 绘图库入门使用教程

简介

plotly.js 是一款用于绘制交互式可视化图表的 JavaScript 库。它支持多种图表类型，例如：柱状图、线性图、散点图、热力图等等。plotly.js 提供了丰富的配置选项，可以让我们定制化我们的图表。

安装

你可以从plotly.js的官方网站下载plotly.js的Javascript库，并在你的HTML代码中链接。

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

简单示例

下面我们来看一个绘制简单柱状图的例子：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>

<div id="myDiv"></div>

<script>
var trace = {
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [20, 14, 23],
  type: 'bar'
};

var data = [trace];

Plotly.newPlot('myDiv', data);
</script>

</body>
</html>

通过以上代码，我们可以创建一个包含三个柱状图的简单分组柱状图(chart)。其中，x和y数组表示图表中要显示的数据。在这个示例中，x数组包含三个动物的名称，“giraffes”、“orangutans”和“monkeys”，y数组表示每种动物拥有的数量。通过type参数，我们指定了要绘制的图表类型是柱状图。

创建交互式图表

在plotly.js中创建交互式图表十分容易，以下代码展示了如何创建一个交互式散点图：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>

<div id="myDiv"></div>

<script>
var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  mode: 'markers',
  marker: {
    size: [40, 60, 80, 100]
  }
};

var data = [trace1];

var layout = {
  title: 'Marker Size',
  xaxis: {title: 'X Axis'},
  yaxis: {title: 'Y Axis'}
};

Plotly.newPlot('myDiv', data, layout);
</script>

</body>
</html>

这个散点图是一个简单的坐标点图，其中每个点的大小表示其值的大小。点的颜色将使用内置的Plotly颜色主题自动选择。我们通过使用大小数组传递大小值，并将它们与 mode: 'markers' 结合使用，来创建所有点大小不同的图表。