跳到主要内容

在Ionic 2中创建交互式图表

当您在一个小团队中工作时,为Android,iOS和Windows编写和维护单独的代码往往很困难。这就是像Ionic这样的混合框架进入画面的地方。它们不仅使我们能够编写可以在所有三个平台上使用的单个代码,而且意味着我们可以使用现有的技术堆栈来实现。

在本教程中,我们将探讨如何解决Ionic 2中的数据可视化等常见任务,这是最有前途的混合应用程序框架之一。我将使用FusionCharts JavaScript图表库(fusioncharts.com),因为它提供了一个包含90多个图表的大型库,与每个设备和浏览器兼容,并且非常易于使用。

设置离子2

要使用Ionic 2开发应用程序,您需要在您的操作系统上运行Node.js版本4+和npm。您可以从中下载Node.js包nodejs.org/en/download和npm一起安装。如果您已经运行了不同版本的Node.js并且想要运行版本4+,那么您可以通过节点版本管理器

接下来,您需要使用npm安装Ionic 2 Beta。为此,请运行npm install -g ionic @ beta在具有root权限的用户帐户的终端中(我们正在全局安装模块)。为了模拟我们在多个平台上创建的Ionic应用程序,我们还需要一个Node模块:科尔多瓦。您可以使用全局安装它npm install -g cordova

我们现在准备创建我们的第一个Ionic应用程序。但是,通过此设置,我们只能在浏览器中看到该应用程序。要模拟iOS或Android设备的应用程序,我们需要将该特定平台模块构建到Cordova。在本教程中,我们将构建iOS模块,因此您需要运行离子平台添加ios

最后,您需要安装Xcode。你会找到相关的说明这里

创建一个Ionic 2应用程序

在本教程中,我们将创建一个名为“Charts”的Ionic 2应用程序。我们将在您当前的工作目录中创建一个“图表”文件夹,并使用示例应用程序引导应用程序。示例应用程序将包含一个基本页面,如此处所述。

要创建此应用,请运行离子起始图--v2在当前的工作目录中(图表是应用程序的名称和--v2告诉Ionic我们要创建一个Ionic 2应用程序)。执行此命令时,a图表文件夹将在当前工作目录中创建。要在浏览器中测试应用程序,请导航至图表文件夹和运行离子发球。这将在您的默认浏览器中启动该应用程序。

添加新页面

现在让我们添加一个页面/组件图表将创建JavaScript图表的应用程序。首先,我们将添加一个带有“Hello World”的简单HTML页面。

在Ionic 2中,可以使用页面将页面添加到Ionic应用程序中@页装饰器(基于Angular 2组件的离子模块),可以访问完整的离子功能。最低限度的页面需要模板HTML文件(包含标记)和JavaScript文件(包含所需的逻辑)。您可以找到有关离子页面的更多详细信息这里

要创建页面,我们将添加甜甜圈chart.js之甜甜圈chart.html文件到图表/应用程序/页面圆环图目录。在HTML文件中,我们可以添加应用程序导航的代码和一个简单的“Hello World”标题:

你好Ionic 

你好,世界

在JavaScript文件中,我们引用作为此组件的模板创建的HTML文件。既然我们还没有做任何花哨的事情,我们可以添加一个空的构造函数ChartsPage

从'ionic-angular'导入{Page}; @Page({templateUrl:'build / pages / pie-chart / pie-chart.html'})导出类ChartsPage {constructor(){}}

我们刚刚创建了一个独立的组件;现在我们需要将其链接到主应用程序。为此,我们需要引用我们在中创建的组件App.js在app文件夹中的文件,并使用该组件网页App组件构造函数的属性。

从'./pages/donut-chart/donut-chart'构造函数(app,platform,menu)导入{ChartsPage} {//默认app构造函数this.app = app; this.platform = platform; this.menu =菜单; this.initializeApp(); //设置我们的应用程序页面 - 我们在这里添加圆环图表this.pages = [{title:'Welcome',组件:HelloIonicPage},{title:'Donut Chart',component:ChartsPage}]; //使HelloIonicPage成为根(或第一)页面 - 默认步骤this.rootPage = HelloIonicPage; }

进行这些更改后,浏览器中的Ionic应用程序应自动重新加载(或再次使用终端中的离子服务)。现在,应用程序的侧面菜单中应显示一个新链接,点击该链接后,您应该会在屏幕上看到“Hello World”。

创建JavaScript图表

现在是时候修改我们的“Hello World”页面来创建一个圆环图。为了能够使用FusionCharts库,我们需要首先包含Fusioncharts.jsFusioncharts.charts.js中的文件WWW / Index.html的文件。

快速提示:如果两个文件都在同一文件夹中,则添加Fusioncharts.js这将是足够的,因为这将自动包括Fusioncharts.charts.js

我们现在将修改上一步中的HTML以创建图表容器:

在构造函数中甜甜圈chart.js之,我们在上面创建的,我们需要添加以下代码来创建图表容器内的图表:

FusionCharts.ready(function(){var revenueChart = new FusionCharts({type:'doughnut2d',renderAt:'chart-container',width:'100%',height:'450',dataFormat:'json',dataSource: {“chart”:{“caption”:“按产品类别划分收入”,“subCaption”:“去年”,“numberPrefix”:“$”,“paletteColors”:“#0075c2,#1aaf5d,#f2c500, #f45b00,#8e0000“,//更多图表属性},”数据“:[{”label“:”食物“,”值“:”28504“} //更多数据]}})。render();} );

在这段代码中,我们通过FusionCharts的构造函数创建了一个新图表。使用的属性简要说明如下:

类型定义图表的类型

RenderAt是我们要渲染图表的容器的ID

宽度高度用于设置图表尺寸

DATAFORMAT是我们要提供图表数据的格式(您可以使用JSON以及XML)

数据源包含FusionCharts内的图表化妆品图表对象和要在其中绘制的实际数据数据排列

虽然我只显示了四个属性图表对象,您可以使用其他一百多个来改善图表的设计。您可以阅读更多相关信息这里

添加此代码后,运行离子发球重新启动应用程序。您应该在侧边菜单中看到“甜甜圈图表”链接。如果你正确地执行了我的所有步骤,当你点击该链接时,你会看到一个圆环图!如果没有,请参阅上的代码这个项目的GitHub回购看看你哪里出错了。

注意:在浏览器中检查后,使用离子模拟ios在iOS模拟器中加载您的应用程序。

加起来

Our doughnut chart representing the revenue split of a hypothetical company by product categories

我们的圆环图表表示按产品类别划分的假设公司的收入分配

正如您刚才所见,在Ionic 2中开始使用数据可视化并不困难。虽然我刚刚制作了一个简单的圆环图来演示该过程,但可以使用相同的过程创建包含多个数据集的复杂图表。 。您唯一需要弄清楚的是FusionCharts接受该特定图表类型的数据的格式。一旦你能够做到这一点,你就可以从图书馆制作任何图表。

如果您需要有关此主题的任何帮助,或者如果您对本教程的内容有任何疑问,请随时抓住我在Twitter上。我总是很乐意提供帮助!

这篇文章最初出现在网络杂志问题283;在这里买

请参阅更多Web设计文章

话题

标志性的2
Netmag
网页设计

相关文章



翻译字数超限