关闭

[置顶] Ionic2之显示图表(chart)曲线dygraph(angularjs2使用第三方js库)

标签: ionic2dygraph图表
2296人阅读 评论(0) 收藏 举报
分类:

在ionic2开发中,发现这个ionic还不够普及,使用中得探索。今天这个例子是在ionic2中使用图表。由于ionic的库里没有图表库,就和Android原生一样,都得使用第三方库。

本来在前端,就有好多js图表库可以用。因此现在要在angular2上使用第三方库。(ionic2使用angular2开发)。只是,这方面例子少。因此写这篇文章。

 

 

一、Angular2使用第三方js插件。

这里参考了文章:https://segmentfault.com/a/1190000005990632

文中提到的方法是:

1.    下载js库。

2.    在index.html文件的head里引入库

3.    在逻辑端,声明这个库在其他地方已经导入(即index.html文件)

declare var Dygraph:any;//声明为外部定义此库。

文章中提到了另一种方式在ionic2工程中我没有成功。接下来就关于导入dygraph.js库作为示例。

在index.html里的<head></head>标签里加入如下。

  <!-- dygraph -->
  <script src="dygraphs/dygraph.js"></script>
  <link href="dygraphs/dygraph.css" rel="stylesheet">

其中,所指定的文件可以到官网下载。

http://dygraphs.com/download.html

 

二、使用gygraph方法思路来源

思路:在ionic2里面即angular2,我们要使用一个component来封装一下这个dygraph库,然后再调用这个component来使用。(基本思路)

 

得出这个思路我参考了以下文章:

1.在ionic1即angular1里使用gygraph插件的方法,这个作者实现了一个directive用于打包dygraph.js的库。地址如下:

https://github.com/robotnic/angular-dygraphs

 

2.在angular2里定义component组件,地址如下:

http://stackoverflow.com/questions/37412398/creating-angular2-component-directive-wrapper-for-dygraphs?answertab=active#tab-top

 3. 另一个图表插件的 directive实现,用于ionic1

http://blog.sina.com.cn/s/blog_78a4978e0102wsh7.html


三、编写封装了dygraph的component组件以及使用

首先声明我使用的编程环境及模板:我使用了ionic2的slidmenu模板。打算在page4页面显示一个图表。

 第一步:引入js插件

在index.html里的<head></head>标签里加入如下。

  <!-- dygraph -->
  <script src="dygraphs/dygraph.js"></script>
  <link href="dygraphs/dygraph.css" rel="stylesheet">

第二步:定义组件

修改补充:

这里可以不用再index.html 里引入js库文件,可用通过以下方法引入文件:

npm install dygraphs
安装完成后,说明文档里会有调用 方法,,其方法如下:(两种)

import Dygraph from 'dygraphs';
// or: const Dygraph = require('dygraphs');



在page4的文件夹下新建一个文件为:mydygraph.ts作为包含dygraph的组件。

在mydygraph.ts文件里写如下内容:

import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

declare var Dygraph:any;//声明为外部定义此库(使用以下的导入,方法,则屏蔽此行,并取消index.html导入的js库文件)
import Dygraph from 'dygraphs';//建议使用这种简单的方法
//import { Dygraph } from 'dygraphs'; //经过测试,这个方法不可用

@Component ({
    selector: 'my-dygraph',
    template:`
        <div>
            <p>zhang san</p>
            <div #graph></div>
        </div>
    `
})
export class DygraphComponent  implements  AfterViewInit  {

  @ViewChild('graph')
  elt:ElementRef;

  @Input()
  title:string;

  ngAfterViewInit() {

    new Dygraph(this.elt.nativeElement, [
                [1,10,100],
                [2,20,80],
                [3,50,60],
                [4,70,80]
              ],
              {
                labels: [ "x", "A", "B" ]
              });

  }
}

这样一个包含dygraph的component就完成了,内容解释如下:

(1)    Selector:‘my-dygraph’;的意义是定义了一个标签,这个标签就代表了这个组件(component),要在页面里使用这个组件,只需要在需要的位置包含这个标签就可以。调用的标签写为:<my-dygraph></my-dygraph>。

(2)    Template:定义了组件的模板。,及组件内的显示元素。我们在这里定义了dygraph需要使用的标签:<div#graph></div>

(3)    在ngAfterViewInit()函数里面使用dygraph定义,以及传递数据。

最后关于dygraph本来的使用方法,参考:http://dygraphs.com/tutorial.html

 

第三步:声明组件

在angular2里面,定义的组件需要在module里面声明才可以被认识。声明方法:

在app目录下的app.module.ts文件里面添加如下内容:

导入:

import { DygraphComponent } from '../pages/page4/mydygraph'; 

声明:在declarations里面增加 DygraphComponent,结果如下。

 declarations: [
    MyApp,
    Page1,
    Page2,
    Page3,
    Page4,
    DygraphComponent
  ],

第四步:使用组件

在page4.html文件里的<ion-content>标签内加入如下内容:

    <div>
       <my-dygraph></my-dygraph>
    </div>

第五步:查看效果

执行命令:ionic serve 在浏览器效果如下:



1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

ionic2 项目中使用echarts图表,Jquery

开发中可能由于项目功能的需要需要嵌入一些图标页面,那么最流行的就是百度开放的echarts ,图标种类很多,非常好用。那么如何在ionic项目中进行使用呢? 首先需要对echarts的使用要有所了解,...
  • ABC__D
  • ABC__D
  • 2017-07-05 15:33
  • 2556

ionic2中使用echarts3创建图表

  • 2016-11-10 09:24
  • 4.98MB
  • 下载

IONIC2-查看IONIC2自带的icons图标

1.使用name引用图标ionic2自带有一套icons图标,使用方法如下: 通过ionic2官方文档图标库,可查看到一系列的图标,这些图标可以通过name来实现的,点击需要的图标一行,可弹出窗口查...
  • xuanhaiyang2008
  • xuanhaiyang2008
  • 2017-05-05 18:22
  • 1661

ionic 中的折线图与柱状图

转自 github : https://github.com/anilkumar007/Charts效果图: 折线图 柱状图 插件组成: js: ng-cordova.min.js ...
  • CapMiachael
  • CapMiachael
  • 2016-11-25 15:26
  • 2088

Angular2组件与Echarts饼状图交互之饼图制作

一、前言 1.基于ng4项目 2.组件包括:根组件app和饼状图组件echart 二、饼状图开发过程 1、添加插件 echart cnpm install echart...
  • happyniceyq
  • happyniceyq
  • 2017-12-05 19:33
  • 242

ionic2实战-使用Chart.js

前言 Chart.js官网Chart.js中文文档 安装Chart.js 执行cnpm install typings -g,全局安装Typings 执行typings search ...
  • sam0535
  • sam0535
  • 2017-09-14 10:36
  • 253

dygraphs的学习-----------------dygraphs插件(图表插件)

关于dygraphs JavaScript Visualization Library的学习笔记 主要内容 1.    笔者留言 2.    什么是dygraphs? 3.    Dygrap...
  • yangqingqo
  • yangqingqo
  • 2012-12-31 21:42
  • 9570

使用dygraphs,动态刷新线图

目的:变更为php,使用php原生代码初始化线图,ajax更新线图。dy的优势在于,比hightchart更新快,占用客户端内存小。       Live random data   ...
  • zzz_781111
  • zzz_781111
  • 2015-09-08 14:47
  • 1355

angular使用echarts折线图

echarts是开源的画图工具,在angular框架中引入echarts不能直接使用。需要新建一个directive //echarts基本参数 app.factory('$echartsConf...
  • kejmln
  • kejmln
  • 2016-05-12 17:14
  • 5442

ionic使用记录----栅格模式

栅格系统 ionic的栅格系统采用了CSS3的弹性盒(Flexible Box)模型,这使得它与大多数栅格系统都有所区别。 Flex布局主要思想是让容器有能力改变其子元素的宽度、高度甚至先后顺序,从而...
  • mainpro126
  • mainpro126
  • 2015-06-08 10:30
  • 5334
    个人资料
    • 访问:65473次
    • 积分:1057
    • 等级:
    • 排名:千里之外
    • 原创:38篇
    • 转载:1篇
    • 译文:3篇
    • 评论:10条
    文章分类
    最新评论