使用Chart.JS呈現資料

API使用範例：使用ChartJS呈現資料

情境假設：

網路上有許多開源視覺化元件，其中ChartJS擁有強大的資料分析、處理與展示功能，在大量的使用者支持下不斷更新，持續推出更新穎、絢麗的資料展示效果，其開源的特性，也使得利用更加有彈性。TGOS也提供了相應的方式，讓ChartJS所繪製出的視覺化圖形可以順利套疊，只要運用TGOS. TGOverlayView()物件疊加層，即可疊加SVG圖檔，並支援ChartJS產製的動畫效果。

建置方式：

0. 在建置網頁時，需要加入ChartJS開源工具庫。

1. 取得資料

//六都資料

var ev = [{ id : 1, name : "台北市", chartDiv: document.getElementById("chart-area1"), x: 304743.6250000005, y: 2770575.1041666684 },

{ id : 2, name : "新北市", chartDiv: document.getElementById("chart-area2"), x: 306290.9830887581, y: 2785849.4620828195 },

{ id : 3, name : "桃園市", chartDiv: document.getElementById("chart-area3"), x: 281645.5000000004, y: 2764648.437500003 },

{ id : 4, name : "台中市", chartDiv: document.getElementById("chart-area4"), x: 218013.35351891196, y: 2670218.6458333344 },

{ id : 5, name : "台南市", chartDiv: document.getElementById("chart-area5"), x: 169300.3164220914, y: 2544190.9516661516 },

{ id : 6, name : "高雄市", chartDiv: document.getElementById("chart-area6"), x: 178249.84951231204, y: 2504410.891635082 }]

2. 實作TGOverlayView()物件疊加層

//客制化圖層

var CustomLayer = function (map) {

this.padding = 50;

this.width = 180;

this.height = 100;

this.setMap(map);

}

//繼承TGOS.TGOverlayView

CustomLayer.prototype = new TGOS.TGOverlayView();

//實做onAdd，設定疊加層

CustomLayer.prototype.onAdd = function () {

//取得欲套疊的地圖承載層

var panes = this.getPanes();

var mapLayer = panes.overlayviewLayer;

//設定疊加層座標系統

this.mSRS = this.map.getCoordSys();

//設定疊加層HTML 物件(DIV)

this.div = document.createElement("div");

this.div.id = "chartDiv";

this.div.style.position = "absolute";

//設定定疊加層寬度

this.div.style.width = "100%";

//設定定疊加層高度

this.div.style.height = "100%";

//設定定疊加層HTML物件 Style

this.div.style.zIndex = 1000;

//將div加入至現有圖層中

mapLayer.appendChild(this.div);

for (var i=0; i < ev.length; i++) {

var tDiv = document.createElement("div");

var tCanvas = document.createElement("canvas");

//設定疊加層HTML 物件(DIV) 放置chart用

tDiv.id = "chartArea_" + ev[i].id;

tDiv.style.width = this.width + "px";

tDiv.style.height = this.height + "px";

tDiv.style.position = "absolute";

tDiv.appendChild(tCanvas);

//new Chart

var config = newConfig();

var ctx = tCanvas.getContext("2d");

ctx.canvas.width = this.width;

ctx.canvas.height = this.height;

window.myPie = new Chart(ctx, config);

//取得螢幕點位

var proj = this.getProjection();

var p = proj.fromMapToDiv(new TGOS.TGPoint(ev[i].x, ev[i].y));

//給螢幕位置

tDiv.style.left = (p.x - this.padding) + "px";

tDiv.style.top = (p.y - this.padding) + "px";

//add chartDiv layer

this.div.appendChild(tDiv);

}

CustomLayer.prototype.onDraw = function () {

//Write By Supergeo

var proj = this.getProjection();

var padding = this.padding;

// transform function. 指定每個點的座標.

for (var i=0; i < ev.length; i++) {

transform(ev[i].id, new TGOS.TGPoint(ev[i].x, ev[i].y));

}

function transform(id, d) {

//將地圖座標轉換成相對於地圖div左上角的螢幕座標

var pt = new TGOS.TGPoint(d.x,d.y);

var p = proj.fromMapToDiv(pt);

document.getElementById("chartArea_" + id).style.left = (p.x - padding) + "px";

document.getElementById("chartArea_" + id).style.top = (p.y - padding) + "px";

}

3. 建立圖台

function InitWnd() {

var pOMap = document.getElementById("TGMap");

pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3826); //宣告TGOnlineMap地圖物件並設定坐標系統

//建立圖層

newCustomLayer = new CustomLayer(pMap);

}

4. 設計ChartJS圖表格式

//圓餅圖參數

function newConfig() {

var randomScalingFactor = function() {

return Math.round(Math.random() * 100);

};

var config = {

type: 'pie',

data: {

datasets: [{

data: [

randomScalingFactor(),

backgroundColor: [

window.chartColors.red,

window.chartColors.orange,

window.chartColors.yellow,

window.chartColors.green,

window.chartColors.blue,

]

}],

labels: [

"Red",

"Orange",

"Yellow",

"Green",

"Blue"

]

options: {

responsive: false,

legend: {

display: false,

position: 'top'

title: {

display: false,

text: '圓餅圖'

}

};

return config;

}