React 和 API 构建 30 天比特币价格互动图表

简介：在本教程中了解 React、交互式图表和使用 API。不在乎后端是如何完成的比特币价格走势图表，跨过比特币价格图表。包含所有代码的 GitHub 存储库链接位于本文底部。上周我发布了一个使用 React JS 进行简单数据可视化的教程。本教程将引导您构建一个简单的折线图：

在本教程中了解 React、交互式图表和使用 API。不在乎后端是如何完成的，跨过比特币价格图表。包含所有代码的 GitHub 存储库链接在本文底部。

为什么？

上周我发布了一篇关于使用 React JS 进行简单数据可视化的教程。本教程将引导您构建一个简单的折线图：

是的，好吧，这很无聊。但是，本教程的重点不是构建令人兴奋的东西，而是学习 React 中 SVG 的基础知识。

在评论中，Kris Morf 询问了如何在图表中添加区域填充，并以 CoinBase 为例。这些图表如下所示：

是的，它比我糟糕的折线图要酷得多。在回答 Kris Morf 如何为折线图添加填充后，我想我为什么不克隆它？这就是我周末所做的。

这是我构建的，以及我将在本文中介绍的内容：

如果您想尝试一下，这里有一个演示。注意：加载可能需要一秒钟，因为它当前部署在 now.sh 的免费层上。

项目结构

这就是我的项目结构。有四种 React 组件。

API

对于这个项目，我能找到的最好的 API 是 CoinDesk API。如果你有更好的比特币 API，请告诉我！

CoinDesk API 提供实时和历史比特币价格数据。对于这个项目，我在左上角显示实时比特币价格 (InfoBox.js)。每 90 秒更新一次。

历史价格是我用来为图表提供数据的价格。历史数据端点为：

API 返回一个如下所示的对象：

{
  “bpi”: {
    “2017–06–24”: 2619.1188,
    ”2017–06–25": 2594.4538,
    ”2017–06–26": 2485.3588,
    ”2017–06–27": 2593.17,
    ”2017–06–28": 2584.5638,
    // ...
  }
}

获得数据后，我会遍历它，将其格式化为对象数组：

for (let date in bitcoinData.bpi){
  sortedData.push({
    d: moment(date).format('MMM DD'),
    p: bitcoinData.bpi[date].toLocaleString(),
    x: count,
    y: bitcoinData.bpi[date]
  });
}

然后将数据发送到构建图表的子组件。以下是数据流的高级概述。

基本数据流

这个项目的数据流非常简单：

打破图表

图形不仅仅是绘制到屏幕上的一个形状。它是单个 SVG 元素中形状和线条的集合。如果您查看 LineChart.js，您会发现有多达 8 个函数调用用于创建我们的图表：

this.makeAxis()         Makes Graph Axis
this.makePath()         Makes Graph Line
this.makeArea()         Makes Shaded Graph Area (under line)
this.makeLabels()       Makes Graph Labels
this.getCoords(e)       When Hovered Gets Coords of Hover
this.createLine()       When Hovered Makes Vertical Line
this.makeActivePoint()  When Hovered Finds Closest Point
this.stopHover()        Clears Line and Point When Hover Stops

让我们看一个例子。如果我们删除所有内容并只运行 makePath()，我们将只在数据点上留下一条 SVG 线。这是它的样子：

同样，我们可以删除除 makeArea() 和 makeAxis() 之外的所有内容。这将绘制我们的两个轴和阴影形状。结果如下：

直到我们开始添加多个形状和线条后，我们的图形才开始变得有趣。 makeAxis() 悬停效果，这就是我们使用的makeAxis()、makePath()、makeLabels()和makeArea()：

当 SVG 元素悬停时，当你停下来时，有趣的事情就会发生。在悬停时，我运行一个函数来获取鼠标在图形上的坐标。为此，我们需要两条信息：

这就是代码的样子：

const svgLocation = document.getElementsByClassName("linechart")[0].getBoundingClientRect();
const adjustment = (svgLocation.width - svgWidth) / 2; //takes padding into consideration
const relativeLoc = e.clientX - svgLocation.left - adjustment;

我首先得到折线图的svgLocation。然后我调整图表可能有的任何填充。最后，我取鼠标的 x 位置并减去 SVG 图表左侧的像素。这给了我相对于折线图的鼠标位置。

更新状态，在鼠标X坐标图上画一条竖线：

同时，我可以简单地遍历图表上的图表，以确定哪个具有最接近鼠标的 X 值：

let {svgWidth} = this.props;
let closestPoint = {};
 for(let i = 0, c = svgWidth; i < svgData.length; i++){
   if ( Math.abs(svgData[i].svgX — this.state.hoverLoc) <= c ){
     c = Math.abs(svgData[i].svgX — this.state.hoverLoc);
     closestPoint = svgData[i];
   }
 }

注意：正如 Francesco Zuppichini 在评论中指出的那样，二分查找比遍历数组更简单。

找到最接近的 X 值后，我们在该点画一个 SVG 圆：

makeActivePoint(){
  const {color, pointRadius} = this.props;
  return (
    
  );
}

结果是这样的：

p>

工具提示

等式的最后一部分是工具提示。工具提示是一个完全不同的组件，但就像我们的垂直线一样。工具提示需要两条信息才能起作用：

这两条信息都是从 LineChart.js 接收的。然后，ToolTip.js 只返回一个

鼠标上的元素。使用来自最新数据点的格式化数据。

let placementStyles = {};
  let width = 100;
  placementStyles.width = width + 'px';
  placementStyles.left = hoverLoc + svgLocation.left - (width/2);
return (
  

    
{ activePoint.d }
    
{activePoint.p }
  


代码在哪里？
我很高兴你问。这个项目的所有代码都是开源的，可以在我的 GitHub Repo 中找到。演示来了。
如果对这个项目的 SVG 元素感兴趣，我将在上一篇文章中详细介绍图形：React JS 或 svg 教程的简单数据可视化和 d3.js 数据可视化。如果你真的想深入研究 React 并学习如何构建很酷的东西比特币价格走势图表，请查看 React JS 课程。
================================================ ==========================
分享一些区块链相关的交互如以太坊、EOS、比特币等。在线编程实战教程：