如何在 React 中创建业务数据仪表板

您是否曾尝试创建并嵌入数据仪表板到您的 React 应用程序中？如果尝试过，您可能知道找到符合特定项目需求的合适数据可视化工具可能颇具挑战性。让我概述一下主要要求：

• 性能至关重要。仪表板应在任何浏览器和设备上流畅运行。
• 轻松与应用程序的底层基础设施集成。
• 支持多种用于数据分析的数据源（CSV、JSON、数据库）。
• 仪表板应提供必要的报告功能，例如：

1. 汇总原始数字。
2. 按日期和值进行交互式过滤
3. 按升序和降序排序以及定义自定义排序规则的能力。
4. 根据不同的维度对数据进行分组。
5. 深入挖掘数据。

• 关键数据可视化功能包括：

1. 多种图表可用于比较值、显示数据的组成或分布、分析随时间变化的趋势或表达变量之间的关系。
2. 交互性。最终用户应该能够与图表上的元素进行交互。

• 自定义选项，例如样式和主题。
• 将结果导出为 PDF 和 Excel。
• 事件系统。为了定义与组件交互的自定义​​场景，应该支持事件。

今天，我想与大家分享一下我对使用满足上述需求并能完美协同工作的工具的想法。

作为本文的第二部分，我将引导您完成在React应用程序中创建仪表板的过程。您只需要使用两个 JavaScript 库和一点想象力 :)

您将获得什么

仪表板由两部分组成——分析部分和可视化部分。第一部分是一个数据透视表，负责对从MongoDB数据库中提取的原始数据进行聚合和过滤；第二部分是一个图表库，用于将这些数据以美观的图表形式显示出来。

在我看来，这两个组件是任何仪表板不可或缺的一部分。数据透视表承担了所有必要的数据转换，而图表则让数据更容易被用户理解。

以下是完成本教程后您将获得的仪表板的预览：

值得一提的是，您可以随后保存结果：数据透视表允许生成 PDF、Excel、CSV、HTML 和 PNG格式的报告，并且可以将图表导出为 PDF 或图像。

没有时间阅读整个教程？直接跳到最后一段，找到 CodePen 演示链接来体验一下。

让我们先来介绍一下这些图书馆。

数据透视表

Flexmonster Pivot Table & Charts是一款客户端数据透视表组件，我强烈推荐将其用作嵌入式 BI 解决方案的一部分。它可以与 React 和其他 JavaScript 框架无缝集成。首先，它拥有丰富的数据源：CSV、JSON、SQL、NoSQL数据库以及Elasticsearch。其次，它还具备可从用户界面访问的交互功能。它能够在运行时轻松地聚合、过滤和排序数据：

此外，其丰富的 API 允许定义交互行为并更改组件的外观。我特别喜欢的是customizeCell API 调用——它可以帮助重新设置特定单元格内容的样式。其他自定义功能包括类似于 Excel 的条件和数字格式。此外，还可以选择一个字段并使用不同的聚合函数，或者创建自定义计算值。后者在您需要跟踪重要的销售和营销指标时非常有用。

图表库

FusionCharts是一个图表库，可以与多个 JavaScript 框架兼容，React 就是其中之一。它受到全球众多开发者的喜爱，这其中有其原因。我最喜欢的是它的易用性。您可以轻松将任何数据显示在精美的图表中——演示版本已准备就绪，可以帮助您开启数据可视化之旅。另一个引人注目的功能是能够通过配置属性来更改图表的主题、标签、工具提示和图例。

了解如何在树状图中可视化分层数据：

将 Flexmonster 与 FusionCharts 集成

要使两个组件协同工作，您需要初始化它们并进行集成。整个过程非常简单：

1. 安装 Flexmonster 依赖项。
2. 安装 FusionCharts 依赖项。
3. 初始化数据透视表并将数据输入其中。
4. 根据这些数据创建您的报告。
5. 一旦数据透视表准备好提供数据，就初始化图表。

稍后您会发现您可以随时返回步骤 4 来更改报告、将更新的数据传递给图表并获得新的见解。

由于每个点都需要更多解释，因此让我们更深入地了解细节。

安装数据透视表

创建单页React 应用程序后，需要将 Flexmonster 安装为npm 包，并将数据透视表渲染到 HTML 容器中：

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="fm-component"></div>

ReactDOM.render( <
    FlexmonsterReact.Pivot toolbar = {
        true
    }
    width = {
        "100%"
    }
    componentFolder = "https://cdn.flexmonster.com/"
    report = {
        {
            "dataSource": {
                dataSourceType: "ocsv",
                filename: "http://localhost:3000/data"
            }
        }
    }
    />,
    document.getElementById("fm-component"))
);

连接您的数据源

现在是时候将数据加载到组件中了。使用 MongoDB 的连接器，我成功与 MongoDB 数据库建立了连接并从中提取数据。您也可以参考本教程进行同样的操作。

根据数据创建报告

首先，定义需要在网格中显示的数据部分。报表的这个子集称为切片。在这里，您可以将层级结构划分为行、列和度量，并设置所有筛选器和/或排序。

我尝试按月份过滤数据以显示两个月的收入。

这是可以作为报告一部分的切片的示例：

"slice": {
    "rows": [{
        "uniqueName": "Date.Month"
    }],
    "columns": [{
        "uniqueName": "[Measures]"
    }],
    "measures": [{
        "uniqueName": "Revenue",
        "aggregation": "sum"
    }]
}

现在您的数据透视表已呈现并填充了您想要集中关注的数据。

安装图表库

设置 FusionCharts 也不成问题——按照与 React集成指南操作，即可成功将该组件嵌入到项目中。安装其npm 包后，创建一个<div>用于渲染图表的容器：

<script src="https://cdn.fusioncharts.com/code/latest/react-fusioncharts.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-fusioncharts@2.0.1/dist/react-fusioncharts.min.js"></script>
<div id="chart-container"></div>

为了能够应用不同的主题，请导入必要的脚本：

<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.gammel.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.candy.js"></script>

在图表中显示表格数据

FusionCharts 库中的每个图表都接受不同格式的 JSON 数据。因此，您需要预处理从数据透视表请求的数据并将其提供给图表。有一个简单的方法可以做到这一点 - 只需添加 Flexmonster 连接器即可处理相应图表类型的数据。
以下是要导入的脚本：

<script src="https://cdn.flexmonster.com/flexmonster.fusioncharts.js"></script>

现在，此连接器的方法可以在您的应用程序中使用。

接下来需要实现以下逻辑：

• 等待数据透视表呈现并准备好提供数据（您可以监听reportcomplete此事件）。
• 使用 API 调用从报告中请求数据flexmonster.fusioncharts.getData()。
• 准备这些数据并将其传递到callbackHandler首次updateHandler创建图表的地方并进行相应更新。

以下是定义createChart()函数的示例：

function createChart() {
    flexmonster.fusioncharts.getData({
        type: "doughnut2d",
        "slice": {
            "rows": [{
                "uniqueName": "Customer Satisfaction"
            }],
            "columns": [{
                "uniqueName": "[Measures]"
            }],
            "measures": [{
                "uniqueName": "Requests",
                "aggregation": "sum"
            }]
        }
    }, drawChart, updateChart);
}

function drawChart(data) {
    var chartConfigs = {
        type: 'doughnut2d',
        width: '500',
        height: '350',
        dataFormat: 'json'
    };
    data.chart.caption = "Customer Satisfaction";
    chartConfigs.dataSource = data;
    ReactDOM.render( <
        ReactFC {
            ...chartConfigs
        }
        />,
        document.getElementById('chart-container')
    );
}

function updateChart(data) {
    var chartConfigs = {
        type: 'doughnut2d',
        width: '500',
        height: '350',
        dataFormat: 'json'
    };
    data.chart.caption = "Customer Satisfaction";
    chartConfigs.dataSource = data;
    ReactDOM.render( <
        ReactFC {
            ...chartConfigs
        }
        />,
        document.getElementById('chart-container')
    );
}

并将该createChart()函数附加reportcomplete为事件处理程序：

reportcomplete = {
    createChart
}

这些片段展示了如何在页面上创建单个图表，但您可以按照类似的方式定义所需数量的图表。

添加额外的视觉功能

需要个性化仪表板的外观吗？您可以更改图表/数据透视表特定元素的颜色，或为其应用预制主题。甚至可以两者兼而有之 :)

就我个人而言，Flexmonster 的蓝绿色主题最引人注目。为了使图表与数据透视表的调色板相符，我指定了数据绘图的调色板。您可以通过属性配置图表。

结果

保存结果并检查图表如何与您应用于报告的更改进行交互：

整合所有

今天，您已经学习了如何使用分析业务仪表板增强您的 React 应用程序。

在我看来，这两个数据可视化工具——数据透视表和图表库——完全是相辅相成的。有了它们，你可以在几分钟内创建一个很棒的仪表板。我鼓励你多尝试不同的数据呈现方式。

请分享您的结果 - 我很高兴看到它们！

感谢您的阅读！

演示

在 CodePen 上玩现场演示👩‍💻👨‍💻

推荐阅读

让我与你们分享所有有用的链接，这些链接帮助我了解如何在我的 React 项目中使用 Flexmonster 和 FusionCharts：

• 如何创建 React 应用
• 如何将 Flexmonster 与 React 集成
• 如何将 Flexmonster 与 FusionCharts 集成
• FusionCharts 的 React 组件
• FusionCharts 图库