this is my code in my ionic
HTML
<ion-header>
<ion-navbar color="primary">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Timeline Chart
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div style="text-align:center">
<button ion-button (click) = "showChart()">
Show Chart
</button>
<button ion-button (click) = "showDetail()">
Show Detail
</button>
</div>
<div id = "timeline" style="overflow-x: auto;"></div>
</ion-content>
TypeScript
import { Component, ViewChild } from '@angular/core';
import { Storage } from '@ionic/storage';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Chart } from 'chart.js';
import { RestserviceProvider } from'../../providers/restservice/restservice'
import { LeavedetailPage } from '../leavedetail/leavedetail'
/**
* Generated class for the Test2Page page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
declare var google;
@IonicPage()
@Component({
selector: 'page-test2',
templateUrl: 'test2.html',
})
export class Test2Page {
chart:any;
TodayWhoLeave:any;
data_need:Array<{Name:any,LeaveType:any,StartDate:any,EndDate:any,Duration:any}> = [];
// container:any;
// data:any;
// option:any;
getday1:any;
day1:any;
getday7:any;
day7:any;
constructor(public navCtrl: NavController,public ReceiveData:RestserviceProvider) {
//google.charts.setOnLoadCallback(this.showChart());
this.ReceiveData.load()
.then(data=>{
this.TodayWhoLeave = data;
//讀取所需的資料,資料已在provider處理過
for(let j = 0 ; j < this.TodayWhoLeave.length ; j++){
this.data_need.push({
Name:this.TodayWhoLeave[j].Name,
LeaveType:this.TodayWhoLeave[j].LeaveType,
StartDate:this.TodayWhoLeave[j].StartDate.slice(0,10),
EndDate:this.TodayWhoLeave[j].EndDate.slice(0,10),
Duration:this.TodayWhoLeave[j].Duration
})
}
console.log(this.data_need);
})
}
showChart(){
// Create the data table.
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'LeaveType'});
data.addColumn({ type: 'string', id: 'Name' });
data.addColumn({ type: 'date', id: 'Start' });
data.addColumn({ type: 'date', id: 'End' });
data.addRows(this.data_need.length);
for(let i = 0 ; i < this.data_need.length ; i++){
data.setCell(i,0,this.data_need[i].Name);
data.setCell(i,1,this.data_need[i].LeaveType);
data.setCell(i,2,new Date(this.data_need[i].StartDate));
data.setCell(i,3,new Date(this.data_need[i].EndDate));
}
//調整表格樣式 在上面的部分解決
var options = {
timeline: {
colorByRowLabel :true , //使假別顏色一致
},
//設定圖表大小
'width':1125,
'height':2436,
colors:['#c2c2d6', '#eeccaa', '#e2cdb6', '#e6b3b3'],
};
// dashboard.bind(control, chart);
chart.draw(data,options);
}
ToGetDay(){
this.getday1 = new Date();
var bejson = JSON.stringify(this.getday1);
this.day1 = bejson.slice(1,11)
this.getday7 = new Date();
this.getday7.setDate(this.getday7.getDate()+6);
bejson = JSON.stringify(this.getday7);
this.day7 = bejson.slice(1,11)
console.log(this.day1);
console.log(this.day7);
}
showDetail(){
this.navCtrl.push(LeavedetailPage);
}
}
I want the HTML can show the chart without any button .What should i do?
thank a lot