iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
自我挑戰組

Angular+Spring Boot API 處理股市資料系列 第 29

Angular Stock上市個股日成交(三)(Day29)

今天我們要來使用zingChart的套件產出視覺化的圖表


首先我們先在daily-tranction-stock.component.ts


import { Component, OnInit } from '@angular/core';
import { HttpService } from '../service/http.service';
import { DailyTranctionStockData } from '../model/DailyTranctionStockData';


@Component({
  selector: 'app-daily-tranction-stock',
  templateUrl: './daily-tranction-stock.component.html',
  styleUrls: ['./daily-tranction-stock.component.css']
})
export class DailyTranctionStockComponent implements OnInit {
  gets: any;
  x_axis: string[] = [];
  y_axis: number[] = [];
  dailyTranctionStockDatas: DailyTranctionStockData[] = [];
  config: zingchart.graphset = {};
  token = sessionStorage.getItem('token') || '';




  constructor(
    private httpService: HttpService
  ) { }

  ngOnInit(): void {
    this.httpService.getGets(this.token, 'stock/search/exchange/getStockDayAll').subscribe(
      (response) => {
        this.gets = response;
        const data: Map<string, any> = new Map(Object.entries(response.data));
        this.dailyTranctionStockDatas = data.get('dailyTranctionStockDatas');
        let tmp_dailyTranctionStockDatas = this.dailyTranctionStockDatas.splice(0, 9);
        console.log(tmp_dailyTranctionStockDatas);
        
        #交易金額
        tmp_dailyTranctionStockDatas.forEach(element => this.y_axis.push(element.TradeValue));
        
        #個股名稱
        tmp_dailyTranctionStockDatas.forEach(element => this.x_axis.push(element.Name));
        
			#設定檔
				this.config = {
          type: 'bar',
          title: {
            'text': '證卷每日交易'
          },
          series: [
            {
              values: this.y_axis
            }
          ],
          scaleX: {
            values: this.x_axis
          }
        };
      }
    )
  }
}

daily-tranction-stock.component.html 放入zingChart模板


<zingchart-angular [config]="config" [height]="500" ></zingchart-angular>

接著就可以看到圖片啦

https://ithelp.ithome.com.tw/upload/images/20211014/2013885773MTkFviNb.png


好啦,經過漫長的29天之後我們終於成功

使用Spring Boot API & Angular顯示出證交所資料了,

但這只是一個開始而已,zingChart還有很多套件可以使用,

剩下的就靠自己摸索啦~~

參考資料:

ZingChart文件-bar


上一篇
Angular Stock上市個股日成交(二)(Day28)
下一篇
心得結語(Day30)
系列文
Angular+Spring Boot API 處理股市資料32

尚未有邦友留言

立即登入留言