开始使用 Plotly.js

在实际应用中，经常需要使用第三方库，或者要对接一些遗留代码。为了展示如何处理这种情况，我们将使用 Plotly 来绘制一个漂亮的温度预测图表！

Plotly

我们将探索 Plotly.js 的 API，并绘制一个散点图。

要使用 plotly.js，需要将其添加到你的应用中。将以下代码行复制并粘贴到你的 HTML 文件中：

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

引入该脚本后，你就可以在代码中使用 Plotly 变量了。通过调用 Plotly.newPlot，可以轻松创建图表来展示天气数据：

1Plotly.newPlot();

让我们更详细地看一下 newPlot 函数：

1. 第一个参数是你要渲染图表的 DOM 元素的 id。
2. 第二个参数是一个对象数组，包含用于图表的一些属性，其中 x、y 和 type 对我们来说最为关键。

Plotly.js 能够轻松创建多种类型的图表，目前我们最关注的是 scatter 散点图。你可以参考文档 这里 查看一些示例。

我们的 Plotly.newPlot 调用看起来会是这样：

1Plotly.newPlot('someDOMElementId', [{
2  x: ourXAxisData,
3  y: ourYAxisData,
4  type: 'scatter'
5}], {
6  margin: {
7    t: 0, r: 0, l: 30
8  },
9  xaxis: {
10    gridcolor: 'transparent'
11  }
12}, {
13  displayModeBar: false
14});

如你所见，我们还传入了一些样式信息作为第三个参数（设置了部分边距并隐藏了 x 轴网格线），以及一些选项作为第四个参数（隐藏了模式栏）。

Plotly.js 提供了大量选项，我强烈建议你查看 优秀的文档，并尝试调整其中的一些设置！

为了入门，我们将绘制一组 9 个数字 [-4, 4] 的平方和立方的图表。以下是用于图表的数据：

x轴：[-4, -3, -2, -1, 0, 1, 2, 3, 4]
y轴-1：[16, 9, 4, 1, 0, 1, 4, 9, 16]
y轴-2：[-64, -27, -8, -1, 0, 1, 8, 27, 64]

可以看到，这非常适合用来表示天气预报。但我们现在身处 React 世界，一切（至少应该）都是组件。你可能已经猜到了——是时候构建我们的 Plot 组件了。