什么是React高位图？为什么使用它们？
反应高图最初只是作为一种图表工具开始使用的，用于监控挪威所有者房屋附近的积雪深度。该工具迅速成为最著名的可视化库之一。它为用户提供了许多出色的内置交互功能，并且易于使用。
在本文档中，我们将学习如何使用cube.js构建简单的电子商务仪表板并做出反应。我们将使用主要的Highcharts库以及Maps，stock和Solid Gauge模块。
重要的是要记住，React Highchart库可根据不同的许可使用，这取决于它是用于商业/政府用途，还是用于个人或非盈利项目。确保检查其许可证页面。
构建仪表盘的前提条件：
1) 具有样本数据的数据库
2) Cube.js后端，以便处理数据库与前端之间的通信
3) 前端应用
4) Create 反应 app build
分析后端-
我们将使用PostgreSQL数据库和电子商务数据集的示例。
使用下面给出的代码下载和导入示例数据集。
$ curl http://cube.dev/downloads/ecom-dump.sql > ecom-dump.sql
$ createdb ecom
$ psql–dbname ecom -f ecom-dump.sql
下一步是安装Cube.js CLI并创建一个新项目
$ npm -g安装cubejs-cli
$ cubejs创建highcharts -d postgres
cube.js使用.env文件中的环境变量进行配置。使用您自己的数据库凭据更新.env文件的内容。
CUBEJS_DB_NAME = ecom
CUBEJS_DB_TYPE = postgres
CUBEJS_API_SECRET =秘密
现在让我们从Cube.js后端开始。
$ npm运行开发
在这一步，您可以在链接上优化Cube.js游乐场 http：//本地主机：4000.
在这里，我们可以看到数据库中的所有表，并且可以选择其中任何一个来生成模式。
Cube.js数据架构概念是基于多维分析的，对于具有OLAP多维数据集经验的人应该看起来很熟悉。
两个主要实体是度量和维度。维度是我们从数据库中获得的“原样”属性，但是度量是聚合操作的结果，如计数，总和，平均值等。
在此示例中，我们需要一个orders and users表。选中此选项，然后单击“ Generate Schema”。然后，Cube.js将在架构文件夹内生成Orders.js和Users.js文件。
Cube.js数据模式是javascript代码，可以轻松进行编辑。如果需要，您还可以动态生成模式。
让我们更新schema / Users.js文件。
我们将仅保留状态，id维度和计数度量，因为我们需要在示例中使用它们。
cube（`Users`，{
sql：`SELECT * FROM public.users`，
dimensions: {
state: {
sql: `state`,
type: `string`
},
id: {
sql: `id`,
type: `number`,
primaryKey: true
}
}
}）;
这就是我们的后端。我们已经配置了数据库并创建了Cube.js。后端。
此后，我们准备开始开发前端应用程序。
带有React 高图的前端仪表板
让我们使用Cube.js模板生成我们的应用程序。导航到“仪表板应用程序”选项卡，然后使用React和Ant Design选择“创建自定义应用程序”。
创建仪表板应用程序和安装依赖项将需要一些时间。完成后，dashboard-app文件夹应在项目文件夹内可见。
接下来，让我们安装所需的依赖项。在dashboard-app文件夹中运行以下命令。
$ cd仪表板应用程序
$ npm安装–保存highcharts 高位反应官方 @ 高图 / map-collection
上面提到的命令将安装以下依赖项：
– 高图
– 高图 反应包装器
– 我们的地图图表包装器的Highcharts地图集合。
您可以随意删除src文件夹和page文件夹中的所有文件，并使用以下内容更新dashboard / index.js文件。
从导入React‘react’;
从中导入ReactDOM‘react-dom’;
进口‘./index.css’;
从导入应用‘./App’;
从*导入*作为serviceWorker‘./serviceWorker’;
反应DOM.render（
<React.StrictMode>
<App></App>
</React.StrictMode>,
document.getElementById（‘root’)
）;
serviceWorker.unregister（）;
我们构建的应用程序将具有以下结构：
– 应用程序作为主要应用程序组件
– 仪表板组件，用于存储数据并管理应用程序状态
– 地图，折线图，库存和其他管理图表的图表组件根据应用程序数据和状态进行渲染。
让我们创建<Dashboard/>仪表板-app / src / components / Dashboards.js文件中的组件，其内容如下。
我们将创建<Map/> component later.
从导入React‘react’;
从导入{布局}‘antd’;
从导入{useCubeQuery}‘@cubejs-client/react’;
从导入地图‘./Map’;
const仪表板=（）=> {
const {resultSet} = useCubeQuery（{
measures: [‘Orders.count’],
dimensions: [‘Users.state’],
timeDimensions: [
{
dimension: ‘Orders.createdAt’,
dateRange: ‘last year’,
},
],
});
如果（！resultSet）{
return “Loading…”;
}
const data = region.tablePivot（）。map（item => [item[‘Users.state’], parseInt(item[‘Orders.count’])])
return (
<Layout>
<Map data={data} />
</Layout>
);
};
导出默认仪表板；
在以上代码段中，我们执行了多个步骤。我们首先导入了useCubeQuery 反应钩子。
从导入{useCubeQuery}“@cubejs-client/react”;
下一步是渲染每种状态下的订单量。为此，我们需要将数据更改为Highcharts格式，其中第一个元素是状态键，第二个元素是值。
[
[“us-ca”,967],
[“us-ny”,283],
[“us-wa”,239],
[“us-il”,205],
[“us-tx”,190]
]
我们正在使用resultSet.tablePivot（）来访问从后端返回的数据并准备进行呈现。
const data = region.tablePivot（）。map（item => [item[‘Users.state’], parseInt(item[‘Orders.count’])])
现在，我们准备将数据填充到Map图表中。
让我们创建一个包含以下内容的新的dashboard-app / src / components / Maps.js文件。
从导入import 反应，{useState，useEffect}‘react’;
从进口Highcharts‘highcharts’;
从导入HighchartsReact‘高位反应官方’;
从中导入highchartsMap‘高图/模块/地图’;
从导入mapDataIE‘@ 高图 / map-collection / countries / us / us-all.geo.json’;
高图Map(Highcharts);
const staticOptions = {
chart: {
styledMode: true,
},
credits: {
enabled: false,
},
title: {
text: ‘Orders by region<small>Highcharts Map API</small>’,
useHTML: true,
},
colorAxis: {
min: 0,
},
tooltip: {
headerFormat: ”,
pointFormat: `
<b>{point.name}</b>: {point.value}`,
},
colorAxis: {
minColor: ‘#FFEAE4’,
maxColor: ‘#FF6492’,
},
series: [
{
name: ‘Basemap’,
mapData: mapDataIE,
borderColor: ‘#FFC3BA’,
borderWidth: 0.5,
nullColor: ‘#FFEAE4’,
showInLegend: false,
allowPointSelect：true，
dataLabels: {
enabled: true,
format: ‘{point.name}’,
color: ‘#000’,
},
states: {
select: {
borderColor: ‘#B5ACFF’,
color: ‘#7A77FF’,
},
},
},
],
};
导出默认值（{data}）=> {
const [options，setOptions] = useState（{}）;
useEffect(() => {
setOptions({
…staticOptions,
series: [
{
…staticOptions.series [0]，
data: data,
},
],
});
}, [data]);
return (
<HighchartsReact
highcharts = {Highcharts}
constructorType={‘mapChart’}
options={options}
/>
);
};
在Map.js文件中，我们导入了useState，useEffect钩子和一堆Highcharts组件。然后，我们根据Highcharts Map API规范定义了图表选项。
在staticOptions中，我们可以设置地图样式，源，数据，事件处理程序和其他选项。
高图可以使用多种SVG地图。
最后，我们合并了staticOptions和props.data，然后将其传递给Highcharts组件。
这就是我们的全部<Map/> component.
现在，我们只需要更新“ dashboard-app / 应用程式.js”以包括<Dashboard/> component:
+从导入仪表板‘./components/仪表板’;
– <Header />
– <Layout.Content>{children}</Layout.Content>
+ <Dashboard />
在此之后，我们准备看我们的第一个图表！
访问该网站 http：//本地主机：3000 在您的浏览器中，我们刚刚建立的地图应在其中可见。
