tags: 2019年鐵人賽 、 JS 、 google-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);
}