保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847

反应高图:这里’s How it Works

什么是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 在您的浏览器中,我们刚刚建立的地图应在其中可见。

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。