実行環境
- Ionic2
- Angular2
詰まっていること
Ionic2上でグラフ表示にPromise利用せず、必要な初期値を与えると、Chart.jsのグラフ表示をすることが出来ました。
しかし、(SQLiteから初期データを取るときに)Promiseオブジェクトを作成して、thenの中でchart.jsの必要な初期値を設定すると、うまくグラフ描画がされません。
SQLiteからデータを取得してから描画させようとしているため、少し時間がかかるので、初期値が与えられる前にグラフの表示をしようとしてるからうまく動かないのかな?と思ってたりもするのですが...
実際のコード
対象の関数はdisplayChart()
です。
html
1<chart [options]="options" [labels]="labels" [data]="datasets" type="line"></chart>
javascript
1 2@Component({ 3 selector: 'game-score', 4 templateUrl: 'game-score.html', 5 providers: [ScoreService, ChartService, SQLService] 6}) 7export class GameScoreComponent { 8 gameSetting: any = { 9 zeroone: { 10 backgroundColor: 'rgba(255,99,132,0.2)', 11 borderColor: 'rgba(255,99,132,1)', 12 label: '01 GAMESのStats', 13 }, 14 cricket: { 15 backgroundColor: 'rgba(50, 82, 179, 0.2)', 16 borderColor: 'rgba(50, 82, 179, 1)', 17 label: 'CRICKETのStats', 18 }, 19 countup: { 20 backgroundColor: 'rgba(1, 110, 21, 0.2)', 21 borderColor: 'rgba(1, 110, 21, 1)', 22 label: 'COUNT-UPのStats', 23 }, 24 } 25 26 @Input() gameType: GameType 27 28 // 子要素のchart情報を取得 29 @ViewChild(ChartComponent) chart: ChartComponent 30 31 /** 32 * グラフ関連の変数 33 */ 34 // グラフのx軸データ 35 labels: string[] = [] 36 // グラフのデータ 37 datasets: Chart.Dataset[] = [] 38 // グラフのオプション 39 options: Chart.Options 40 41 stats: number[] = [] 42 date: string[] = [] 43 44 constructor( 45 public navCtrl: NavController, 46 public platform: Platform, 47 private scoreService: ScoreService, 48 private chartService: ChartService, 49 private sqlService: SQLService, 50 ) { 51 } 52 53 /** 54 * 初期処理 55 */ 56 ngOnInit() { 57 // グラフデータのセット 58 this.displayChart() 59 } 60 61 /** 62 * 表示形式が変更されたとき、グラフの再描画 63 */ 64 onChange() { 65 this.options.options.scales.xAxes[0].time.unit = this.unit 66 this.chart.update() 67 } 68 69 /** 70 * スコアをグラフ表示 71 */ 72 async displayChart() { 73 // SQLiteからデータ取得 74 await this.sqlService.fetchStatsScore(this.gameType) 75 .then((data: any) => { 76 for(let i = 0; i < data.rows.length; i++){ 77 this.stats.push(parseInt(data.rows.item(i).stats)) 78 this.date.push(data.rows.item(i).created_at) 79 } 80 }) 81 .catch((error) => { 82 alert(error) 83 }) 84 // ここで初期値を設定してる・・・ 85 this.setChartData(this.stats, this.date) 86 } 87 88 89 /** 90 * グラフのデータのセット 91 * @param data 92 * @param labels 93 */ 94 setChartData(data: number[], labels: string[]) { 95 this.labels = labels 96 this.datasets = this.chartService.getDatasets( 97 data, 98 this.gameSetting[this.gameType].label, 99 this.gameSetting[this.gameType].backgroundColor, 100 this.gameSetting[this.gameType].borderColor 101 ) 102 this.options = this.chartService.getOptions(this.gameType ,this.labels, this.datasets, this.unit, data) 103 } 104}
やったこと
this.setChartData(this.stats, this.date)
の後ろにthis.chart.update()
でグラフの再描画を行ったがうまく行かなかった。- [追記]今はasync awaitで書いていますが,それより前のコードで,thenの中のfor文の後にsetChartDataを記述してもうまく行きませんでした.
さいごに
どうかよろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/23 02:42
2017/04/23 02:49
2017/04/23 02:57 編集
2017/04/23 03:00
2017/04/23 03:02
2017/04/23 03:31
2017/04/23 06:51
2017/04/23 09:39
2017/04/23 09:48
2017/04/23 09:48
2017/04/23 09:54
2017/04/23 09:54
2017/04/23 09:56
2017/04/23 09:56
2017/04/23 10:04 編集
2017/04/23 10:06
2017/04/23 10:10 編集
2017/04/23 10:10
2017/04/23 10:11