iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0
自我挑戰組

前端菜焦阿日記系列 第 7

|D7| JS - Google Charts 統計圖表

  • 分享至 

  • xImage
  •  
tags: 2019年鐵人賽JSgoogle-charts

前言

最近需要做統計圖,研究了下Google Charts怎麼使用,發現好好讀文件的重要性,還有下對關鍵字找stackoverflow參考

使用google chart

完成圖

HTML

<!-- haad區 -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<!-- body區 -->
<div id="chart" style="width: 900px; height: 300px;"></div>

JS


//載入Visualization API,括號裡第一個參數是版本名稱或數字
google.charts.load("current", {
    packages: ["corechart"], //第二個packages是要顯示的圖表類型
    "language": "zh-cn"      //第三個是語言,有時會影響日期格式等等
});

//當Visualization API載入後用Callback呼叫下面的drawChart function
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    
    //建一個data table,也可以用google.visualization.DataTable()建立另一種格式的data
    var data = google.visualization.arrayToDataTable([
        ["月份","登革熱確診人數", "平均雨量"], //依序表示x軸,第一個y軸,第二個y軸
        ["1", 3,  19],
        ["2", 9, 20],
        ["3", 8, 20],
        ["4", 4, 19],
        ["5", 3, 29]
    ]);

    //設定圖表選項
    var options = {
        
        animation: {  //載入動畫
            startup: true,
            duration: 1000,
            easing: 'out',
        },
        vAxes: [{ //設定雙y軸的最大值跟最小值,若只需要單ㄧy軸用vAxis
            minValue: 1, //若圖表想從0開始,要設定最小值1
            maxValue: 15
        }, {
            minValue: 17,
            maxValue: 30
        }],
        curveType: 'function',
        hAxis: {  //x軸標題
            title: "1~12月"
        },
        series: {
            0: {
                type: "bars",
                targetAxisIndex: 0,
                color: "blue",
                baseline: 60000,
            },
            1: {
                type: "line",
                targetAxisIndex: 1,
                color: "red",
                baseline: 60000,
            },
            2: {
                type: "line",
                targetAxisIndex: 1,
                color: "cyan",
                baseline: 60000,
            }
        }
    };

    //建立object,以使用.draw方法畫出帶有data, options資料的圖表
    //若要換成繪製圓餅圖改用google.visualization.PieChart,但data數據需要再調整
    var chart = new google.visualization.LineChart(document.getElementById("chart"));
    chart.draw(data, options);
}


上一篇
|D6| JS - `<select>` 取值
下一篇
|D8| CSS - Block-level elements
系列文
前端菜焦阿日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言