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);
    
Google Chart 速查 Google Chart 速查 Reviewed by Wild on 2/14/2017 03:53:00 下午 Rating: 5

沒有留言:

沒有Google帳號也可發表意見唷!

技術提供:Blogger.