Google Chart 速查

Google Chart 只要 include 一隻 js 即可產生超強美圖。https://developers.google.com/chart/

Demo

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

<div id="TargetElement"></div>

//載入指定 library
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

var rows = [];
function drawChart() {
    //Chart各種參數設定
    var options = {
        title: 'Noise'
    };
    //建立 Chart 物件
    var chart = new google.visualization.AreaChart(document.getElementById('div的ID名稱'));

    //建立虛擬的 Datatable
    chartData = new google.visualization.DataTable();
    //新增欄位、名稱
    chartData.addColumn('datetime', 'Time of Day');
    chartData.addColumn('number', 'noise');

    //塞資料
    var getData = function () {
        rows.push([new Date(2017,01,20, 10, 30, 12), 50]);
        rows.push([new Date(1486709095000), 25]); //ms
        rows.push([new Date(), 30]); //now
        chartData.addRows(rows);
        return chartData;
    };

    //連續動態產圖
    var updateInterval = 1000;
    function update() {
        //時間一到就重畫
        chart.draw(getData(), options);
        setTimeout(update, updateInterval);
    }
    update();
};

可以將 chart, chartData 在外面宣告，options 拉到外面定義
其他事件觸發更新，用 set 相關參數，再 .draw

Column格式

number
string
boolean
date
datetime
timeofday

Chart 物件

曲線圖

LineChart
AreaChart
SteppedAreaChart

柱狀圖

BarChart

圓餅圖

PieChart

儀表板

Gauge

Options 共用參數設定

var options = {
    title: 'Noise', //圖標題
    legend: { //欄位說明
        position: 'none', //left,top,right,bottom,none(不顯示),in
        textStyle: {color: 'blue', fontSize: 16}
    },
    Axis: {title: '', //軸標題
        gridlines: {
            color: 'transparent' //軸線顏色 (此為透明)
        },
        baselineColor: 'white' //底線顏色
    },
    hAxis: { //水平軸
    },
    vAxis: { //垂直軸
    },
    vAxes: { //值座標
        0: { //第一條線(左側)
            title: opts.sBarLabel, //座標軸標題
            titleTextStyle: {color: 'blue'}, //座標軸標題顏色
            viewWindowMode: 'explicit',
            viewWindow: {
                max: 1000, //自訂座標最大值
                min: 0 //自訂座標最小值
            },
            gridlineColor: '#EAEAEA', //橫格線顏色
            format:'# ℃', //座標格式 (ex. 'hh:mm')
            showTextEvery: 5, //每隔 5 顯示座標
        },
        1: { //第二條線(右側)
        },
    },
    series: {  //一組圖內，每個資料的個別顏色
        0:{color:'#4871BF'},
        1:{color:'#EA7E3F'}
    },
    isStacked: true, //Y軸資料範圍固定, (relative,..)
    lineWidth:1, //線粗細
    fontSize:10, //全圖字體大小
    fontName:'Times-Roman', //全圖字體
    colors: ['#e0440e', 'red', ...], //依序的線顏色
    chartArea:{ //內圖與外框間距調整
        left:'5%',
        top:10, 
        bottom:10,
        width:"93%",
        height:"90%"
    },
    crosshair: { //十字準線
        color: '#3bc',
        opacity: 0.8,
        trigger: 'both' //focus, selection
    },
};

Dashboard

http://jsfiddle.net/asgallant/Db4fm/3/

controlWrapper 可以控制資料區間
dashboard 物件可以將 controlWrapper、Chart 兩個組合起來

Datatable 操作

addColumn(type, desc) 增加單欄
addColumns([[type,desc],[type,desc]..] 增加多欄
addRow([aaa,bbb,....]) 新增單筆資料
addRows([[aaa,bbb,...],[aaa,bbb,...],..]) 新增多筆資料
getNumberOfRows() 取得總筆數
清空資料

重新 new datatable 物件
重新設定 Column

ComboChart

使用 visualization.ComboChart()
共用主軸，再針對不同欄位，指定不同的圖形

//data 為 1 row 5 columns

var options = {
    seriesType: 'bars',
    series: {
        0:{color:'#4871BF',type:'bar'},
        1:{color:'#EA7E3F',type:'bar'},
        2:{color:'#FB061B',type:'line'},
        3:{color:'#1EB158',type:'line'}
    }
};

var chart = new google.visualization.ComboChart(document.getElementById('div的ID名稱'));
chart.draw(getData(), options);

Overlays 疊加 div

在原本的 chart div 外，再包一層 relative div
div 內放置 chart div，還有其他 element
要移動的 element，需設定為 absolute，並使用 cli.getYLocation()、cli.getXLocation() 等取得相對位置

<div class="marker" style="width:100%;position: relative">
    <div id="myChart" style="width:100%"></div>
    //這邊放你要 Overlay 的元件
</div>


    function placeMarker(myDataTable) {
        var cli = this.getChartLayoutInterface();
        var chartArea = cli.getChartAreaBoundingBox();
        $('#myChart').parents('.marker').eq(0).append(
            '<div class="overlay-text" style="position: absolute; top:'+Math.floor(cli.getYLocation(dataTable.getValue(1, 4))-20)+'px;left:6%">'+dataTable.getColumnLabel(4)+'</div>'
        );
    }

    var chart = new google.xxx;
    google.visualization.events.addListener(chart, 'ready', placeMarker.bind(chart, getData()));
    chart.draw(xxxxxx);