ionic2 下集成highchart与chart

参考:angular2+highcharts+chart.js     如何在Ionic2项目中使用第三方JavaScript库

一:highchart环境配置

1. npm install highcharts –save

2. typings install dt~highcharts –global --save

发现没安装typings

3返回安装typings

npm install –g typings

返回继续操作步骤2

发现没有highchart查找了一下:

二. chart 环境配置

 1  npm install chart.js --save

2 typings install chart.js --save

chart 的环境配置好了

三 .项目中使用:

ionic2 中的一个页面

在real.html 中


<ion-content class="page-real">

  <canvas id="myChart" width="400" height="100" class="mychart">

  <div #chart class="highchart"></div>

</ion-content>



在 real.scss 中:定义表格的一些样式

在real.ts中


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

import { NavController } from 'ionic-angular';

import * as ChartJs from 'chart.js'; // 导入chart.js

import * as Highcharts from 'highcharts' ;//highcharts图表

@Component({

   selector: 'page-real',

   templateUrl: 'real.html'

})

export class RealPage {

       constructor(public navCtrl: NavController) { }

   ionViewDidEnter() {

          var canvas =  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

                                     }

                              }]

                        }

                  }

            })

}

@ViewChild('chart') public chartEl: ElementRef;  //highcharts

private _chart: any; //highcharts

   //highcharts

    public ngAfterViewInit() {

                let opts: any = {

                    title: {

                          text: 'Monthly Average Temperature',

                         x: -20

                       },

               xAxis: {

                 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

                  },

           series: [{

                 name: 'Tokyo',

                data: [

                      7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6

                  ]

               },

            {

                      name: 'Tokyo1',

                      data: [5.0, 6.9, 1.5, 14.5, 18.2, 21.5, 25.2,26.5, 11.3, 25.3, 127.9, 10.6  ]

                  }

          ]};

if (this.chartEl && this.chartEl.nativeElement) {

           opts.chart = {

             type: 'line',

             renderTo: this.chartEl.nativeElement

           };

           this._chart = new Highcharts.Chart(opts);

       }

   }

   public ngOnDestroy() {

         this._chart.destroy();

   }

}


四 效果图

1 chart

2 highchart

有错误的地方,还请大家指出,谢谢!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • host Copyright (c) 2014-2017, racaljk. https://github.com...
    JasonStack阅读 3,136评论 0 4
  • 本文整理了在实践过程中使用的Linux网络工具,这些工具提供的功能非常强大,我们平时使用的只是冰山一角,比如lso...
    老夫刘某阅读 3,606评论 0 7
  • 所谓婚姻不过是自我欺骗的结果,他爱我,我爱她,这在婚姻开始时,就是自我欺骗的开始,有些人双方都信了,幸福美满!有些...
    正义小姐姐阅读 825评论 0 0
  • 环境: CentOS 7.2 背景 帮客户托管在机房的服务器系统做安全加固,加固好后会有第三方机构进行安全扫描。 ...
    飞翼_U阅读 3,685评论 0 0
  • 今天上午外面真冷啊,妈妈带着我和弟弟在小区玩得开心,妈妈说要去给弟弟买药。弟弟有点感冒了。中午吃的麻辣烫,我感觉麻...
    魏雅轩阅读 56评论 0 0