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() 取得總筆數
• 清空資料
1. 重新 new datatable 物件
2. 重新設定 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

1. 在原本的 chart div 外，再包一層 relative div
2. div 內放置 chart div，還有其他 element
3. 要移動的 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);