iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 27
0
Modern Web

WebGIS入門學習 - 以Openlayers實作系列 第 27

Day 27. 今天不寫程式改來學知識 #5:前端RWD與圖表套件

前言

今天來討論前端RWD的套件、表格的套件、圖表的套件分別有哪些好用的、可以當作參考。
目前js相關的前端套件非常多,使用者可以依據自己的需求進行選擇,有些為擴充性高的、有些為較簡單使用的、有些介面好看 等等的,可嘗試討討砍、使用看看。

今天的大綱

分為RWD套件、表格、圖表:

  1. Bootstrap
  2. Semantic UI
  3. DataTables
  4. FooTable
  5. Highchart.js
  6. D3.js

1. Bootstrap

  • https://getbootstrap.com/
  • Bootstrap是一個前端的套件,主要為了達到RWD響應式的網頁設計
  • 建立WebAPI預設樣式即是套用Bootstrap
  • 有許多元件可選擇與使用

範例

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

https://ithelp.ithome.com.tw/upload/images/20201006/20108631Kgua0Ncx0d.png

2. Semantic UI

  • https://semantic-ui.com/
  • 相較於Bootstrap,其程式碼又更為簡潔,增加其易讀性
  • 技術說明文件完整,適合給初學者使用
  • 本系列最常使用的前端套件

範例

<button class="ui primary basic button">Primary</button>
<button class="ui secondary basic button">Secondary</button>
<button class="ui positive basic button">Positive</button>
<button class="ui negative basic button">Negative</button>

https://ithelp.ithome.com.tw/upload/images/20201006/20108631RU6wnvA0yK.png

3. DataTables

20 Useful Javascript Data Table Libraries 提供20種Table的library,不過仔細觀察,有些表格套件不是這麼的好用。

我自己在選擇的時候,希望能達到以下目標:

  1. 具有accordion,將較不重要的資訊塞在裡面,若要觀看還可以打開來觀察
  2. 具有自動Sorting,可以自由地進行排序
  3. 表格內支援html語法
  4. 具有搜尋列
  5. 分頁顯示
  6. 依據目前顯示的畫面輸出csv或txt檔

但很可惜的是目前我還沒看到有一個這麼完整的套件,但最常使用的就是DataTables和FooTable,以下說明DataTables內容。

  • https://datatables.net/
  • 以上除了無法依據畫面輸出外,其他都有達成
  • 介面稍微有點復古
  • 官網說明:
    https://ithelp.ithome.com.tw/upload/images/20201006/20108631KW4yqVmpA8.png

範例

function Employee ( name, position, salary, office ) {
    this.name = name;
    this.position = position;
    this.salary = salary;
    this._office = office;
 
    this.office = function () {
        return this._office;
    }
};
 
$('#example').DataTable( {
    data: [
        new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
    ],
    columns: [
        { data: 'name' },
        { data: 'salary' },
        { data: 'office' },
        { data: 'position' }
    ]
} );

https://ithelp.ithome.com.tw/upload/images/20201006/201086317TUOtDKTgg.png

4. FooTable

範例

jQuery(function($){
	$('#modal-example-1').footable({
		"useParentWidth": true,
		"columns": $.get('columns.json'),
		"rows": $.get('rows.json')
	});
});

https://ithelp.ithome.com.tw/upload/images/20201006/20108631kta7AXYTwd.png

5. Highchart.js

  • https://www.highcharts.com/
  • 非商業使用為免費、商業使用需要授權
  • 程式碼為開源
  • 圖表類型有限
  • 程式碼較為直覺與簡單

範例

Highcharts.chart('container', {
    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },
    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },
    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    xAxis: {
        accessibility: {
            rangeDescription: 'Range: 2010 to 2017'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },
    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }
});

https://ithelp.ithome.com.tw/upload/images/20201006/20108631vE7tNrNnQB.png

6. D3.js

範例

line = d3.line()
    .defined(d => !isNaN(d.value))
    .x(d => x(d.date))
    .y(d => y(d.value));
x = d3.scaleUtc()
    .domain(d3.extent(data, d => d.date))
    .range([margin.left, width - margin.right]);
y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)]).nice()
    .range([height - margin.bottom, margin.top]);
xAxis = g => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
yAxis = g => g
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y))
    .call(g => g.select(".domain").remove())
    .call(g => g.select(".tick:last-of-type text").clone()
        .attr("x", 3)
        .attr("text-anchor", "start")
        .attr("font-weight", "bold")
        .text(data.y))
chart = {
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);

  svg.append("g")
      .call(xAxis);

  svg.append("g")
      .call(yAxis);

  svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("d", line);

  return svg.node();
}

https://ithelp.ithome.com.tw/upload/images/20201006/201086318jF2tTdQQj.png


小結

明天我們將這些前端套件應用於系統開發上,來學習如何撈取並展示時序性GPS觀測解算資料。


上一篇
Day 26. 如何在地圖上畫Pokemon #3:還原使用者儲存之繪圖
下一篇
Day 28. 全台GPS三維形變時序資料查詢
系列文
WebGIS入門學習 - 以Openlayers實作30

尚未有邦友留言

立即登入留言