在 React 中构建仪表板
介绍
关于仪表板，有一点是：无论你做什么，你都无法逃避它们。每个公司的每个部门都在追求一个目标（如果不是几个的话），而监控目标状态的最佳方法就是拥有一个紧凑的仪表板来监控所有相关指标。
想想看。营销人员追逐潜在客户，销售人员追逐这些潜在客户，开发人员则忙于解决问题。所有这些情况都有一个仪表板 — 如果您是开发人员，那么在某个时候您必须为您的公司制作一个仪表板。那么，我为什么不现在就学习如何创建一个仪表板呢？
在本教程中，我们将使用FusionCharts提供的 JavaScript 图表库来制作图表。但我们不会使用原生 JavaScript，而是使用 React；它是目前最热门的 JavaScript 框架（如果你问我，这是理所当然的）。在我们的仪表板中，我们将探索 Acme, Inc. 在 2015 年的表现；我们将了解其收入最高的国家、月收入趋势和表现最佳的产品类别。我们的最终仪表板将如下所示：
您可以在此处查看实时版本，并在此处找到该项目的 GitHub 存储库。
FusionCharts 提供了一个专门用于在 React 中制作图表的插件，使我们的工作变得更容易一些。在开始之前，让我们先探索一下 React。
什么是 React 以及为什么要使用它？
React 是一个 JavaScript 库，用于为 Web 创建可重用的视图组件。React 的速度很快，如果你想更新视图，只需重新渲染整个视图，React 就会找出更新文档对象模型 (DOM) 的最佳方法。为了实现这一点，React 使用了虚拟 DOM 和 DOM Diff 算法。你可以在这个 StackOverflow 线程上阅读更多相关信息。
注意：如果您想跟随本教程，请在此处下载 FusionCharts 核心库，并在此处下载其 React 插件。
设置
如上所述，为了创建仪表板，我们将使用 React 和 FusionCharts。为了以 React 友好的方式抽象出 FusionCharts 的细节，我们将使用 FusionCharts 提供的 React 插件。因此，我们需要包含 React、FusionCharts 和 React-FusionCharts 插件的 JavaScript 文件。首先，使用<script>标签将上述三个脚本嵌入 HTML 页面。
要用 React 编写应用程序，最好使用 JSX 语法。虽然不建议这样做，也可以用原生 JavaScript 创建应用程序，但使用 JSX 可以清晰地展示代码，代码也会简洁。因此，我们将用 JSX 构建此仪表板。您可以在此处阅读有关 JSX 的更多信息。
<script src='https://fb.me/react-with-addons-0.14.6.js'></script>
<script src='https://fb.me/JSXTransformer-0.13.3.js'></script> // React Scripts
<script src='js/fusioncharts.js'></script>
<script src='js/fusioncharts.charts.js'></script>
<script src='js/fusioncharts.powercharts.js'></script> // FusionCharts files
<script src='js/react-fusioncharts.min.js'></script> // React FusionCharts plugin
<script src='js/fusioncharts.theme.carbon.js'></script> // theme file
注意：仅建议在开发应用程序中包括 JSX Transformer。对于可用于生产的代码，请预编译 JSX，这样就无需包括此文件。
准备好基本设置后，我们将添加一些标记和 React JSX 代码来创建仪表板。
为仪表板创建 HTML 页面
在我们构建的仪表板中，我们将创建 Acme Inc. 各种收入指标的三个可视化效果。我们将创建一个柱形图来显示前六个收入来源国家的收入，创建一个样条图（折线图的平滑版本）来显示一年中各个月份的收入分布，并创建一个环形图来找出哪个产品类别产生的收入百分比最高。简而言之，我们将呈现柱形图、样条图和环形图。我们将创建横跨整个页面宽度的柱形图，以及横跨 50% 宽度的两列布局的样条图和环形图。以下 HTML 和 CSS 将创建 HTML 容器来创建此布局。HTML 容器是图表呈现的位置。
HTML：
<div class="chart-row">
<div id="country-revenue"></div>
</div>
<div class="chart-row">
<div id="monthly-revenue" class="inline-chart">
</div>
<div id="product-revenue" class="inline-chart">
</div>
</div>
样式表：
.chart-row {
margin-bottom: 15px;
}
.inline-chart {
display: inline-block;
width: 48%;
margin-left: 1%;
}
现在我们将准备这三个图表的数据并将它们呈现在我们刚刚创建的容器中。
创建 React 组件
HTML 结构准备好后，我们将根据 HTML 结构创建一个根 React 组件。我们将 HTML 结构转换为有效的 JSX，并在组件的 render 函数中返回它。为了实现这一点，我们做了一些更改，例如将class更改为className。
这是我们创建的反应组件：
var DashboardApp = React.createClass({
render: function() {
return (
<div>
<h1 className="main-title">Acme Inc. Revenue Analysis for 2015</h1>
<div id="interactive-dashbaord"></div>
<div className="chart-row">
<div id="country-revenue">
// country revenue chart here
</div>
</div>
<div className="chart-row">
<div id="monthly-revenue" className="inline-chart">
// chart 2 here - spline
</div>
<div id="product-revenue" className="inline-chart">
// chart 3 here - donut
</div>
</div>
</div>
);
}
});
接下来我们将这个组件渲染成一个 HTML 元素：
React.render(
<DashboardApp />,
document.getElementById("dashboard")
);
这是我们创建并渲染的空 React 组件。我们需要在其中创建图表，并使用我们设计的骨架标记来渲染它们（我们将在以下部分中介绍这一点，请耐心等待！）。
创建多个图表组件
现在，让我们详细了解一下创建一个图表（列）的过程。创建其他两个图表的过程类似，您会在下面的描述中注意到差异。
准备图表数据
每个图表库的输入数据格式都略有不同。由于我们在项目中使用 FusionCharts，因此我们需要将数据格式化为 FusionCharts 可以理解的格式。它接受 JSON 数据作为包含标签和值的对象数组。语法如下：
{
"label": "Orange"
创建图表配置
图表配置包含图表类型的各种属性，例如标题、子标题和主题等。它还包含要绘制的数据。还记得我刚才提到的属性差异吗？这些差异包括数据、图表类型、高度和宽度。还有其他与主题相关的属性，这三种图表的属性大致相同。
示例图表配置如下所示：
{
type: "doughnut2d",
renderAt: "product-revenue",
width: '100%',
height: 400,
dataFormat: "json",
dataSource: {
chart: {
caption: "Top 5 stores in last month by revenue",
theme: "carbon"
},
data: [{
"label": "Jan",
"value": "657000"
}, {
"label": "Feb",
"value": "138000"
},
... {
"label": "Dec",
"value": "730000"
}
]
}
}
使用 React 插件创建图表
图表配置准备好后，我们就可以创建 React 图表了。我们将使用 React 插件 API 来创建它。插件的唯一输入是我们之前创建的配置。我们可以使用以下代码简单地创建它。
<react_fc.FusionCharts {...countryChartConfigs} />
我们上面创建的图表是柱形图，另外两个图表是样条线和圆环图。我们将为这两个图表创建图表配置并提及正确的类型并创建 React 图表组件。
<react_fc.FusionCharts {...monthlyChartConfigs} />
<react_fc.FusionCharts {...productChartConfigs} />
现在我们需要将三个图表组件适当地放置在我们之前创建的DashboardApp的 JSX 中。这是放置图表组件后的新 JSX。
<div>
<h1 className="main-title">Acme Inc. Revenue Analysis for 2015</h1>
<div id="interactive-dashbaord"></div>
<div className="chart-row">
<div id="country-revenue">
<react_fc.FusionCharts {...countryChartConfigs} />
</div>
</div>
<div className="chart-row">
<div id="monthly-revenue" className="inline-chart">
<react_fc.FusionCharts {...monthlyChartConfigs} />
</div>
<div id="product-revenue" className="inline-chart">
<react_fc.FusionCharts {...productChartConfigs} />
</div>
</div>
</div>
添加后，您应该会看到仪表板呈现在您的页面上。如果您遇到任何问题或想要查看项目的源代码，请转到项目的GitHub repo。
其他资源
使用我上面描述的过程，您可以在 React 中创建相对复杂的图表和仪表板。当然，当我们尝试自己构建东西时，我们都会遇到问题。为了帮助您解决这些问题，我在下面列出了一些资源。
- 官方插件页面和 GitHub repo：以下是React charts官方插件页面及其GitHub repo的便捷链接。如果您对插件有任何问题，这些是您应该首先前往的地方，因为它们包含所有相关信息。
- 文档：您可以在此处找到该插件的官方文档。它涵盖了从入门到一些高级主题（例如向图表添加注释）的所有内容。
- 使仪表板更具交互性：我在本教程中制作了一个相对简单的仪表板，因为目标是让您开始使用 React 制作图表。但是，您可以使用FusionCharts 提供的事件和方法向图表添加许多交互性。查看这个描绘全球恐怖主义统计数据的高级仪表板以获得一些灵感（是的，它是使用 React 和 FusionCharts 构建的）。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~