bi可視化工具

通過智能數據分析使復雜變得簡單 (Making the complex simple with smart data analysis)

It is hard to overestimate the value of insightful analytics nowadays. All business processes have become data-driven: marketing, accounting, human resources, customer service, finance.

如今，很難高估具有洞察力的分析的價值。 所有業務流程都已成為數據驅動的：營銷，會計，人力資源，客戶服務，財務。

And to convince the decision makers, you need to properly convey the meaning of the data. One possible technique is composing an analytical web report. Another essential part of it is high-powered data visualization which helps you understand the business trends of your company.

為了說服決策者，您需要正確傳達數據的含義。 一種可能的技術是編寫分析網絡報告。 它的另一個重要部分是強大的數據可視化，可幫助您了解公司的業務趨勢。

I’ve done some research, and I’ll now give you a comprehensive overview of four popular tools for web reporting and data analysis. The first two of them are free, the following two are more advanced. These tools will be useful for both the developers and data analysts.

我已經進行了一些研究，現在將為您提供四種流行的Web報告和數據分析工具的全面概述。 其中的前兩個是免費的，接下來的兩個是更高級的。 這些工具對開發人員都將有用 和數據分析員 。

免費工具 (Free tools)

The following options provide opportunities for basic web reporting.

以下選項為基本的Web報告提供了機會。

數據透視表 (PivotTable.js)

PivotTable.js is an open-source JavaScript Pivot Table. It aims to provide the functionality for data analysis, and requires a good knowledge of JavaScript to reach its full potential.

PivotTable.js是一個開放源代碼JavaScript Pivot Table。 它旨在提供用于數據分析的功能，并且需要具備JavaScript的豐富知識才能發揮其全部潛能。

1. Built-in web reporting features:
   內置的網絡報告功能：

• Support of .csv and JSON data sources

  支持.csv和JSON數據源

• Aggregation, filtering, sorting, and grouping are available. There are 22 functions which include functions for statistical research.

  聚合 ， 過濾 ， 排序 ， 和分組可用。 有22個功能 ，其中包括統計研究功能。

• You can move the fields from columns to rows, and vice versa, with the help of drag & drop functionality.

  您可以在拖放功能的幫助下將字段從列移動到行，反之亦然。

• Custom cell formatting

  自定義單元格格式

• TSV renderer for exporting to TSV format

  用于導出為TSV格式的TSV渲染器

• Ability to define multiple aggregators

  能夠定義多個聚合器

• A heat map rendering option

  熱圖渲染選項

2. View customization features:

2.查看自定義功能：

• Mobile-enabled renderers for touch devices are available.
  提供了用于觸摸設備的支持移動設備的渲染器。

• Cells of the grid can be colored.

  網格的單元可以著色。

• There is an Excel-like layout available: each hierarchy is displayed in a separate column or row.
  有一個類似于Excel的布局：每個層次結構顯示在單獨的列或行中。

• Custom formatting is possible as well as making a custom heat map color-scale.

  自定義格式以及制作自定義熱圖色標都是可能的。

• Language localization: the pivot table is available in English and French, and it’s possible to write your own “language pack” in JavaScript.

  語言本地化 ：數據透視表提供英語和法語兩種語言 ， 并且可以用JavaScript編寫自己的“語言包”。

3. Integration and compatibility:

3.集成和兼容性：

• There is a React version with integrated Plotly charts.

  有一個帶有集成的Plotly圖表的React版本 。

• It is compatible with Python/Jupyter and R/RStudio.
  它與Python / Jupyter和R / RStudio兼容。

4. Limits:

4.限制：

• Handles up to 100K rows
  處理多達10萬行
• Unfortunately, subtotals can be rendered only via an additional plugin.
  不幸的是，小計只能通過其他插件來呈現。
• Built-in renderers for export to CSV and Excel are not available.
  無法使用用于導出到CSV和Excel的內置渲染器。

• To save the configuration of the report, you need to implement this functionality yourself. PivotTable.js provides a freedom in customization, though.

  要保存報告的配置，您需要自己實現此功能。 但是，PivotTable.js提供了自定義的自由。

5. Creating charts:

5.創建圖表：

You can use the renderers for integration with C3 Charts, D3.js, Plotly, and Google Charts. It is possible to use Highcharts along with the pivot table with the help of a third-party plugin.

您可以將渲染器與C3圖表 ， D3.js ， Plotly ， 和Google圖表 。 借助第三方插件，可以將Highcharts與數據透視表一起使用。

Learn more:

學到更多：

• Download from GitHub

  從GitHub下載

Demos on JSFiddle:

JSFiddle上的演示：

• Main demo

  主要示范

• Analysis of R datasets

  R數據集分析

WebDataRocks (WebDataRocks)

WebDataRocks is an embeddable web pivot table written in JavaScript. It is a lightweight component. You can use it in a web application and build an interactive report based on your data. It can be viewed on mobile devices and desktop clients. It is suitable for less technical end-users, but offers advanced customization options for developers.

WebDataRocks 是用JavaScript編寫的可嵌入網絡數據透視表 。 它是輕量級的組件。 您可以在Web應用程序中使用它，并根據您的數據構建交互式報告。 可以在移動設備和桌面客戶端上查看它。 它適合技術含量較低的最終用戶，但為開發人員提供了高級自定義選項。

1. Built-in web reporting features:

1.內置的網絡報告功能：

• Support of local and remote JSON and .csv data sources

  支持本地和遠程 JSON和.csv數據源

• The main functionality is accessible via the special extra-part of the pivot table — the Toolbar.

  可通過數據透視表的特殊額外部分( 工具欄 )訪問主要功能。

• Aggregation, multiple filtering, sorting, and grouping are easy with the UI. There are 13 aggregation functions and the ability to create a custom calculated value.

  使用UI可以輕松進行聚合，多種過濾，排序和分組 。 共有13種匯總功能，可以創建自定義計算值。

• Configuring fields via the Field List and moving them from columns to rows and vice versa with the help of drag and drop functionality

  通過字段列表配置字段，并通過拖放功能將它們從列移動到行，反之亦然

• Creation of multi-level hierarchies

  創建多層次結構

• Each cell of the grid can be drilled through.
  網格的每個單元均可鉆取。

• Sharing your results with colleagues: you can save the report and export it to PDF, Excel, and HTML formats, or print it.

  與同事共享結果：您可以保存報告并將其導出為PDF，Excel和HTML格式，或進行打印 。

2. View customization features:

2.查看自定義功能：

• The look and feel of the reporting tool can be changed. There are four predefined themes that may be to your taste, and the possibility to create your own theme.

  報告工具的外觀可以更改。 有四個預定義的主題可能會合您的喜好，并且可以創建您自己的主題。

• You can use a conditional formatting feature to highlight the most important cells of the pivot table based on particular values.

  您可以使用條件格式設置功能根據特定值突出顯示數據透視表中最重要的單元格。

• Number formatting
  數字格式

• If you need to change the layout, you can choose a classic, compact, or flat form of the pivot table. For me, the compact form has the most laconic and neat style.

  如果需要更改布局 ，則可以選擇經典，緊湊或平面形式的數據透視表。 對我來說，緊湊的形式具有最簡潔，整潔的風格。

• Language localization — you can choose among available languages, or translate your pivot table into the needed language using a simple template JSON file.

  語言本地化 — 您可以選擇可用的語言，也可以使用簡單的模板JSON文件將數據透視表轉換為所需的語言。

3. Integration and compatibility:

3.集成和兼容性：

• WebDataRocks can be embedded into AngularJS, Angular and React applications.
  WebDataRocks可以嵌入到AngularJS，Angular和React應用程序中。

4. Limits:

4.限制：

• Maximum data size is 1Mb.
  最大數據大小為1Mb。

5. Creating charts:

5.創建圖表：

It is easy to integrate WebDataRocks with Google Charts, Highcharts or any other charting library. There are tutorials available in the documentation.

將WebDataRocks與Google Charts，Highcharts或任何其他圖表庫集成起來很容易。 文檔中有可用的教程。

Learn more:

學到更多：

• Quick start

  快速開始

• 3 installation options

  3個安裝選項

CodePen demos:

CodePen演示：

• Multi-level hierarchy with types

  具有類型的多級層次結構

• A dashboard with HighCharts

  具有HighCharts的儀表板

先進的解決方案 (Advanced solutions)

Let’s move on to tools that are more high-powered embedded BI tools and provide a more advanced web reporting experience.

讓我們繼續使用功能更強大的嵌入式BI工具并提供更高級的Web報告體驗的工具。

A free 30-day trial is available for testing both tools.

可免費試用30天，以測試這兩種工具。

威龍 (Flexmonster)

Flexmonster Pivot Table & Charts is a JavaScript pivot table component. It is well-suited for deep analysis of tabular and multidimensional data, and building visual reports based on these. The main differences from the free options are OLAP cube support and more integration options.

Flexmonster數據透視表和圖表 是JavaScript數據透視表組件。 它非常適合對表格和多維數據進行深度分析，并基于這些數據構建可視化報告。 與免費選項的主要區別是對OLAP多維數據集的支持和更多的集成選項。

1. Built-in web reporting features:

1.內置的網絡報告功能：

• Supported data formats are CSV, JSON, data from SQL and NoSQL databases, and OLAP cubes — such as Microsoft Analysis Services and Pentaho Mondrian cubes).

  支持的數據格式為CSV，JSON ， SQL和NoSQL數據庫中的數據以及OLAP多維數據集 - 例如Microsoft Analysis Services和Pentaho Mondrian多維數據集)。

• You can use multiple aggregations to summarize numerical data. There are 16 aggregation functions available and the ability to create a calculated value.

  您可以使用多個匯總來匯總數字數據。 有16種聚合函數可用，并具有創建計算值的功能。

• Sorting and grouping of the data

  數據排序和分組

• Filtering can be performed by values — to display Top/Bottom N records — member names and/or applied to the whole report.

  可以按值執行過濾 -以顯示前N個/后N個記錄- 成員名稱和/或應用于整個報表。

• You can add interactivity to your pivot table by using event handlers.

  您可以使用事件處理程序將交互性添加到數據透視表中。

• The final report can be saved in a JSON file with all the configurations and formatting applied. You can load it later for further work.

  最終報告可以保存在 應用了所有配置和格式的JSON文件 。 您可以稍后加載它以進行進一步的工作。

• Export the report to HMTL, Image, CSV, Excel or PDF formats without the need to connect any third-party plugins.

  出口 可以將報告轉換為HMTL，Image，CSV，Excel或PDF格式，而無需連接任何第三方插件。

2. View customization features

2.查看自定義功能

• It is possible to choose one of the five theme styles or create a custom one.

  可以選擇五種 主題樣式之一或創建自定義樣式 。

• Grid customization functionality allows the creation of heat map visualizations.

  網格自定義功能允許創建熱圖可視化。

• Conditional formatting of cells

  單元格的條件格式

• Number formatting

  數字格式

• Date values can be displayed in user-defined formatting.

  日期值可以以用戶定義的格式顯示。

• Component localization includes seven languages. You can translate the pivot table by yourself with the help of a template JSON file.

  組件本地化包括七種語言。 您可以借助模板JSON文件自己轉換數據透視表。

• A mobile-friendly design
  便于移動的設計

3. Integration and compatibility

3.集成和兼容性

• Flexmonster can be included in the simple web page or integrated into AngularJS, Angular, or React applications. There are also tutorials on the official website on integrating with jQuery and Webpack.

  Flexmonster可以包含在簡單的網頁中，也可以集成到AngularJS，Angular或React應用程序中。 官方網站上還有關于與jQuery和Webpack集成的教程。

• MongoDB data analysis is of special interest for those who have huge amounts of data stored in documents. Connection to MongoDB is supported via Node.js.

  MongoDB數據分析特別適合那些在文檔中存儲大量數據的人。 通過Node.js支持與MongoDB的連接。

4. Limits:

4.限制：

Handles up to 1 million rows so there is no problem with big datasets.

處理多達一百萬行，因此大型數據集沒有問題。

5. Creating charts:

5.創建圖表：

Flexmonster has pivot charts as a part of the component. To get access to other charts, you can use guides on integration with Google Charts, Highcharts, FusionCharts, or any other third party charting libraries. All these approaches help to create interactive dashboards.

Flexmonster將數據透視圖作為組件的一部分。 要訪問其他圖表，您可以使用與Google Charts，Highcharts，FusionCharts或任何其他第三方圖表庫集成的指南。 所有這些方法都有助于創建交互式儀表板。

Learn more:

學到更多：

• Quick start

  快速開始

• Download options

  下載選項

Demos:

演示：

• Main demo

  主要示范

• Heat Map

  熱圖

DhtmlxPivot (DhtmlxPivot)

DhtmlxPivot is a JavaScript Pivot Grid for analytical reports creation. It is a part of the dhtmlxSuite, but can be purchased separately from the bundle. It offers a modern UI and integration with different server-side technologies.

DhtmlxPivot 是用于創建分析報告JavaScript Pivot網格。 它是dhtmlxSuite的一部分，但可以從捆綁包中單獨購買。 它提供了現代化的UI并與不同的服務器端技術集成。

1. Built-in web reporting features:

1.內置的網絡報告功能：

• Supports connection to JSON, .csv, and XML data sources. Data can be loaded from JavaScript array and HTML table.

  支持與JSON ， .csv和XML數據源的連接。 可以從JavaScript數組和HTML表加載數據。

• There are only four inbuilt aggregation functions — max, min, sum and count. Custom ones can be created.
  只有四個內置的聚合函數-最大，最小，總和和計數。 可以創建自定義的。

• Grouping, searching, and sorting of the data

  分組 ， 搜索 ， 和數據排序

• Filtering using UI or pre-defined string, number, and dates filters. Also, you can define global filters and set the number of rows to display per page on the grid.

  使用UI或預先定義字符串，數字和日期過濾器過濾 。 另外，您可以定義全局過濾器并設置要在網格上每頁顯示的行數。

• Drag and drop functionality

  拖放功能

• Cells can be edited and filled with the custom content
  可以編輯單元格并填充自定義內容
• Built-in module for exporting the report to an Excel file with all the configurations saved
  內置模塊，用于將報告導出到Excel文件并保存所有配置

2. View customization features:

2.查看自定義功能：

• The layout can be adjusted. For example, you can change the width of columns, left margin, turn on a “read-only” mode for the pivot table.
  布局可以調整。 例如，您可以更改列的寬度，左邊距，打開數據透視表的“只讀”模式。

• Conditional formatting and custom CSS of the cells

  單元格的條件格式和自定義CSS

• Mobile-friendly design as well
  以及適合移動設備的設計
• Localization of the interface is possible via the special method.
  可以通過特殊方法對接口進行本地化。

3. Integration and compatibility:

3.集成和兼容性：

• Supports integration with multiple technologies, such as PHP, Java, .NET, Node.js, Ruby on Rails, ASP.NET, ColdFusion, and Typescript and other technologies.
  支持與多種技術的集成，例如PHP，Java，.NET，Node.js，Ruby on Rails，ASP.NET，ColdFusion和Typescript等技術。

4. Limits:

4.限制：

There is no information about a data size on the official website. Testing showed that the pivot table renders up to 10K rows.

官方網站上沒有有關數據大小的信息。 測試表明，數據透視表最多可渲染1萬行。

5. Creating charts:

5.創建圖表：

To use charts in your web reports, the best option is to use dhtmlxChart. If you purchased the dhtmlxSuite, they are already included in the bundle. However, you can purchase it separately.

要在您的Web報表中使用圖表，最好的選擇是使用dhtmlxChart。 如果您購買了dhtmlxSuite ，則它們已包含在捆綁包中。 但是，您可以單獨購買。

Learn more:

學到更多：

• Samples

  樣品

• Download packages

  下載包

摘要 (Summary)

To my mind, a perfect tool contains a bundle of built-in features such as:

在我看來，一個完美的工具包含許多內置功能，例如：

• Loading of CSV, JSON and multidimensional data
  加載CSV，JSON和多維數據
• Support of aggregation pipeline via UI
  通過UI支持聚合管道
• The ability to display the data in charts and integrate with any server-side and front-end technology
  能夠以圖表形式顯示數據并與任何服務器端和前端技術集成
• Exporting should be easy as well, without the need to include any third party modules.
  導出也應該很容易，無需包含任何第三方模塊。

Furthermore, the tools should always evolve to meet the new demands of end-users. It is up to you which one to choose for your project, and I hope it will help improve the way you work with the data.

此外，工具應始終發展以滿足最終用戶的新需求。 由您決定要為項目選擇哪一個，我希望它將有助于改善處理數據的方式。

翻譯自: https://www.freecodecamp.org/news/4-data-visualization-and-web-reporting-tools-for-your-bi-solution-35503cc8b7e3/

bi可視化工具