Google Chart

文前言...

原本沒有打算要寫一篇介紹它的，畢竟官方文件其實很清楚
當初靠著官方文件 + 網路文章就解決了直方圖版本。

官方文件：Using Google Charts | Google for Developers
網路文章：Day18 iT邦鐵人賽 —來一個 Google Pie Chart 吧 | by Lai | Medium

之所以為甚麼會參考這篇網路文章呢，是的，原本一開始是打算畫圓餅圖
萬萬沒想到某區塊過大以至於不適合圓餅圖，太擠了...
最近才因為區塊開始趨向平均分配，所以加個圓餅圖。
也因此需要撿回當時的記憶，因為沒有記下來所以完全重找 QQ

因此記下。

主文

簡單介紹直方圖 & 圓餅圖 (目前也只碰過這兩種)
範例 DEMO 就...以後再說 (?

先來點簡單外框。

引入 https://www.gstatic.com/charts/loader.js 檔案
html 給個 div，只需要設定 id：{html} <div id="chart"></div>

js 撰寫 (範例來自 Example /Visualization: Pie Chart | Charts | Google for Developers 簡化)

// Load google charts
google.charts.load('current', {'packages':['corechart']});

// 當 Google Charts 讀取完成後執行 drawChart 函式
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var data = google.visualization.arrayToDataTable([
                  ['Task', 'Hours per Day'],
                  ['Work',     11],
                  ['Eat',      2],
                  ['Commute',  2],
                  ['Watch TV', 2],
                  ['Sleep',    7]
                ]);

    var options = {
      title: 'My Daily Activities'
    };

    var chart = new google.visualization.XXX(
                    document.getElementById('chart')
                );

    chart.draw(data, options);
}

結束！

主要變動的是 JS 的部分。

XXX => 看使用哪種圖表：圓餅圖 PieChart、直方圖 ColumnChart...

data: array 的部分

第一個是名稱 (用在圖例名稱、滑鼠移上的時候顯示)
第二個是數量 (次數之類的)

動態資料可採用一般 js 寫法：

let dataTable = [
    ['name', 'count'],
];
dataTable.push(...);

// 初始化 Google Charts 的 DataTable
let data = google.visualization.arrayToDataTable(dataTable);

options: 各種選項。比如設定圖的寬與高、圖例顯示與否及擺放位置、圓餅圖改 3D 版...

另外注意：drawChart() 函式只能出現一次，所以不管你要畫幾個圖都要放在同一個 drawChart() 裡面，不要像我一樣傻 QQ

共用 `options` (應該？)

title: string、圖表顯示名稱
width、height: int、圖表寬與高
legend: 物件、圖例顯示位置
- eg: {js} legend: {position: 'top', textStyle: {color: 'blue', fontSize: 16}},

ref: Google Chart Background Color - Stack Overflow

backgroundColor: 物件、設定圖表背景色 (預設白色)
- eg: {js} backgroundColor: { fill: 'snow' },

Column Chart 直方圖

應該是這個中文對吧 (?

ref: Visualization: Column Chart | Charts | Google for Developers

`options`

colors: 設定各條指定顏色
- eg: {js} colors: ['#EA0000', '#3366CC', '#EA0000', '#3366CC', '#EA0000', '#3366CC']

衍伸條上顯示數值用：

let dataTable = [
    ['name', 'count'],
];

...

// 條上顯示數值用
let view = new google.visualization.DataView(data);
view.setColumns([0, 1,
    {
     calc: "stringify",
     sourceColumn: 1,
     type: "string",
     role: "annotation"
    }, 2]);

let chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(view, options);

Pie Chart 圓餅圖

ref: Visualization: Pie Chart | Charts | Google for Developers

`options`

is3D: bool、是否改用 3D 立體版

Google Chart

文前言...

主文

共用 options (應該？)

Column Chart 直方圖

options

Pie Chart 圓餅圖

options

共用 `options` (應該？)

`options`

`options`