• 如何在Ionic2项目中使用第三方JavaScript库


    Ionic的官网放出一记大招Ionic and Typings,来介绍如何在Ionic2项目中使用第三方JavaScript库。

    因为在前阵子正好想用一个非常有名的第三方JS库ChartJs来实现一些东西,但我们的项目框架使用的是Ionic2,并且使用的是TypeScript来做开发语言的,所以当时想了很多的办法也没有很好地集成进来,最后还是使用了一个开源库ng2-charts来实现的。

    看了Ionic and Typings的教程,来总结一下方法吧,其实特别简单啦,如下

    npm install -g typings
    typings search loads
    typings install lodash --save
    

      

    以上是教程中使用lodash的方法,现在我们来看一下,如果我想在自己的Ionic2项目中使用ChartJs的步骤吧。

    1, 安装ChartJs库

    cd /项目的根目录下
    npm install chart.js --save

    2, 全局安装typings

    npm install -g typings

    3, 咱们也搜一下有多少个chart.js的源啦

    typings search chart.js
    Viewing 2 of 2
    
    NAME     SOURCE HOMEPAGE                               DESCRIPTION VERSIONS UPDATED
    chart.js npm    https://www.npmjs.com/package/chart.js             1        2016-06-15T17:49:20.000Z
    chart    dt     https://github.com/nnnick/Chart.js                 1        2016-03-16T15:55:26.000Z

    4, 不错,有两个源,安装chart.js,这个看起来比较新

    typings install chart.js --save

    基本的环境配置到这里搞定了

    接下来看一下如何在项目中使用
    1, 参考ChartJS的官网,在xxx.html创建一个Chart.

    <ion-content padding class="about">  
        <canvas id="myChart" width="400" height="400"></canvas> 
    </ion-content>

    2, 在xxx.ts中引用Chart,并创建数据。如下

    import {Component} from '@angular/core';
    import {NavController} from 'ionic-angular';
    import * as ChartJs from 'chart.js'; // 导入chart.js
    @Component({
        templateUrl: 'build/pages/about/about.html'
    })
    export class AboutPage {
        constructor(private navController:NavController) {
    
        }
    
        ionViewDidEnter() {
            var canvas = <HTMLCanvasElement> document.getElementById("myChart");
            var ctx = canvas.getContext("2d");  // 这里是关键, 不能写在constructor()中
            ChartJs.Line(ctx,{
                data: {
                    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            })
        }
    }

    OK! 大功告成~ 运行一下项目看一下喽~

    参考

    Ionic and Typings
    TypeScript: problems with type system

    文/思小言(简书作者)
    原文链接:http://www.jianshu.com/p/5f603f593917
    著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
  • 相关阅读:
    四则运算
    软工与我
    四则运算结对作业
    《构建之法》读第四、十七章收获
    2016012088四则运算
    构建之法第一、二、十六章
    我的软件工程之路
    小学四则运算结对项目报告【GUI】
    构建之法4,17章读书笔记
    2016012095+小学四则远算练习软件项目报告
  • 原文地址:https://www.cnblogs.com/cjxhd/p/5777203.html
Copyright © 2020-2023  润新知