[Turn] Angular2+highcharts+chart.js

Here is a simple example of using highchairs and Chart.js under Ionic2
Chartjs Section Reference http://www.jianshu.com/p/bc18132da812

1. Installing Hightcharts

install highcharts --savetypings install dt~highcharts --global --save

2. Editing

HTML file
Add a div to the HTML to display the chart

<ion-content class=" about "> <!-- chart.js--> <canvas id=" mychart "width="  ">
                
                 </
                 canvas> <!--highchart--> <div #chart></div></< Span class= "Hljs-name" >ION-CONTENT>         
                  

TS file

Import {Component,elementref,afterviewinit,ondestroy,viewchild}From' @angular/core ';Import {Navcontroller}From' Ionic-angular ';Import *As ChartjsFrom' Chart.js ';Charts ChartImport *As HighchartsFrom' Highcharts 'Highcharts Chart@Component ({templateurl:' Build/pages/plus/plus.html ',})ExportClass PluspageImplements Afterviewinit, ondestroy{ConstructorPrivate Navctrl:navcontroller) {}@ViewChild (' Chart ')Public chartel:elementref;HighchartsPrivate _chart:AnyHighchartsHighchartsPublic Ngafterviewinit () {Let opts:any = {title: {text:' Monthly Average temperature ', x:-20}, Xaxis: {categories: [' Jan ',' Feb ',' Mar ',' Apr ',' May ',' June ',' Jul ',' The "' 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 (); }Chart.js Ionviewdidenter () {var canvas = <HTMLCanvasElement>document.getElementById ("MyChart");var ctx = Canvas.getcontext (' 2d '); Chartjs.line (ctx,{data:{labels:["Red","Blue","Yellow",' Green ',"Purple","Orange"], datasets:[{Label:"# of Vote", data:[12,19,3,5,2,3], backgroundcolor:[ ' Rgba (255,,, 0.2) ', ' Rgba (SI, 162, 235, 0.2) ', ' Rgba (255, 206, 86, 0.2) ', ' Rgba (192, 192, 0.2) ', ' Rgba (153, 102, 255, 0.2) ', ' rgba (255, 159, +, 0.2) ', bordercolor:[ ' Rgba (255,99,132,1) ', ' Rgba (162, 235, 1) ', ' Rgba (255, 206, 1) ', ' rgba (, 192, 192, 1) ', ' Rgba (153, 102, 255, 1) ', ' Rgba (255, 159, 1) ', BorderWidth:1}]}, options:{scales:{yaxes:[{Ticks:{beginatzero:
                                                                                                                         
                                                                                                                          true}}}}); }}
                                                                                                                         

3.

Nico_zhang
Links: http://www.jianshu.com/p/e187c27e257e
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

[Turn] Angular2+highcharts+chart.js