單一資料系列、圓點 Bullet 的簡潔雷達圖。

因為常常要實作 UI 設計師設計的圖表樣式… 所以想把調整過的圖表記錄起來,這樣以後可能就複製貼上再微調就可以了 XD。

HTML 的部分

準備一個有高度的 <div>:

JavaScript 的部分

(這邊有用 AngularJS… 但沒關係 for pure JavaScript 就忽略 $scope 就好)

準備一個可以被重複使用的 function:


有圓點圖例(round legend marker)的簡潔圓餅圖。

圓餅圖

因為常常要實作 UI 設計師設計的圖表樣式… 所以想把調整過的圖表記錄起來,這樣以後可能就複製貼上再微調就可以了 XD。

HTML 的部分

準備一個有高度的 <div>:

JavaScript 的部分

(這邊有用 AngularJS… 但沒關係 for pure JavaScript 就忽略 $scope 就好)

準備一個可以被重複使用的 function:


嘗試「模組化」常用的 style,看看未來可不可以變成自己的基本 style library。

因為常常要跟 UI 設計師配合實作新設計的網頁,有的時候新設計一種樣式就重新寫一次客製化的 CSS… 覺得好像有點浪費。所以最近就嘗試「模組化」常用的 style,看看未來可不可以變成自己的基本 style library。

目錄

  1. Overall 整體的樣式
  2. .style_clean 清除樣式
  3. 字的相關樣式
    3.1 .font_ 字的樣式
    3.2 .lh_ 行高
    3.3 .line_ 限制行數
    3.4 .break_word 換行
  4. 區塊的相關樣式
    4.1 .w_ 寬度、.h_ 高度
    4.2 .bg_ 背景顏色
    4.3 .x_scroll 滑動
  5. Box Model 的相關樣式
    5.1 margin 相關
    5.2 …

Table 左右滑動的時候,讓最左邊的欄位固定住。

目標的效果

假設有一個 table 長這個樣子:

因為資料欄位太多了,導致需要在 table 左右滑動才能看到一行完整的資料 row。可是這樣就導致,滑到後面會變成有點不知道在看哪一個,因為用來辨認的 ID 編號不見了:


轉成 Base64 編碼的圖片 Data URI 格式,然後在網頁上放圖片。

目標圖表

例如想要把這個圓餅圖匯出成圖片,這個圓餅圖的程式碼在這裡:https://www.amcharts.com/demos/pie-chart/

將圖表匯出成圖片 Data URI 格式

amCharts 官網的匯出教學寫在這裡:https://www.amcharts.com/docs/v4/concepts/exporting/#Using_export_API


讓指定的數字從 0 開始計數增加的動畫。

因為這個數字增加的動畫套件好像沒有官網,只有 GitHub,所以我截了使用區的示意圖來當開場圖片。

總之這個套件的動畫效果就是讓指定的數字(綠色的那些),當網頁捲動到顯示這些數字的區塊時,數字就開始從 0 增加到目標數值(例如上圖的 274、421、1364、18)這樣的動畫效果。這個效果也很常在其他網站上面看到,感覺有點像 Landing Page 必備的套件了!

安裝到專案中

npm

根據 GitHub 官網,可以透過 npm 安裝:

JavaScript 的部份

因為 CounterUp.js 需要搭配 jQueryWaypoints,所以需要在引入 CounterUp.js 之前先引入 jQuery 跟 Waypoints。src 連結指向目標檔案:

本次使用 jQuery v3.2.1 跟Waypoints v4.0.1,而 CounterUp.js 的版本則是 v2.1.0。供參考。

實際使用在網頁中

HTML 的部分

在目標數字加上「counter」這個 class:

JavaScript 的部份

然後在 JS 程式碼中啟用跟設定 CounterUp 的參數:

  • delay:每個數字動畫的延遲時間(毫秒)。
  • time:計數動畫全部的持續時間。

這樣就可以啦!

開場圖的程式碼

因為開場圖的程式碼有一點點不一樣,所以也一起記錄在這裡好了。是用「data-toggle」而不是用 class 的方式。

HTML 的部分

JavaScript 的部份

基本上是差不多的。

好用的動畫套件再+1!


就是當網頁捲到那個區塊的時候,一個一個動畫才會執行。

最近發現了這個簡單好用的前端動畫特效套件,從官網的動畫特效就可以看出來這個動畫是幹嘛的。也很常在其他網站上面看到這種動畫效果,感覺有點像 Landing Page 必備的套件了!

安裝到專案中

CSS 的部份

Animate.css 去下載安裝 animate.css 檔案後,href 連結指向 animate.css 檔案:

JavaScript 的部份

WOW.jsGitHub 去下載安裝 wow.min.js 檔案後,src 連結指向 wow.min.js 檔案:

然後在 JS 程式碼中用「new WOW().init();」這樣一行程式碼就可以啟用 wow.js 了:

實際使用在網頁中

在要用動畫特效的 HTML element 上加上 CSS class「wow」,就可以先將該 HTML element 給隱藏起來,網頁捲動到該區塊才會揭露該 HTML element:

然後再加上動畫的類型 class(可以到 Animate.css 找動畫類型 class),例如「fadeInUp」就是「向上淡入」的動畫類型,是很常見的效果:

如果還想要讓動畫再慢一點執行,可以加上「data-wow-delay=”0.1s”」,這樣這個動畫會在網頁捲動到該區塊後 0.1 秒後才執行。這種適合在該區塊有很多個 item,想要讓每個 item 的動畫都有一點點時間差的漸層效果時使用:

WOW.js 好用推推!!


如果文字太長了就…

效果:

上圖就是設定「標題」的行數是 2 行、「文字描述」的行數是 3 行的效果。多出來的地方就以「…」點點點的方式呈現。可以將過長的文字進行截斷,使版面維持簡潔。

如果有人想要了解更多,可以點選「標題」或是「文字描述」連結到另外一個網頁去,所以在網頁中也常常搭配 <a href=”#”></a> 超連結來使用。

HTML 的部份

以「標題」為例,因為有搭配 <a>,所以文字真正是被包在 <a> 裡面。


做一個 DAO / Repository 來把資料存到 Elasticsearch。

接續「Java Spring Boot MVC 系列 (2):接收資料的 RabbitMQ 監聽器」之後,RabbitMQ 監聽器收到資料了,接下來要把資料存到 Elasticsearch 中。

在 RabbitMQ 監聽器 listener

在 RabbitMQ 監聽器 listener(listener > RabbitMQListener.java)拿到 message 資料後,把 message 資料轉成 map 格式(原本應該是 JSON 格式):

然後因為我的 message 內容是 {“name”:”EJ”} 這樣而已,所以我希望存到 Elasticsearch 裡面的就是很簡單的 {“name”:”EJ”}。目標 index 名稱為「test …


做一個服務來定期送資料給 RabbitMQ。

目標是可以送資料給 RabbitMQ,然後最好是定期送。這樣子就是需要一個 服務(Service)!

建立新的 Spring 專案

這裡步驟基本上跟「Java Spring Boot MVC 系列 (2):接收資料的 RabbitMQ 監聽器」這裡一樣,只是專案的 Name 改為「demoService」 。建立完成之後,在 STS 的最左邊會有 demoService 的資料夾。

1. pom.xml 檔案

這裡會有剛剛選的 dependency 們。不過需要注意的是,因為後來有發現需要用到 JSON Object,所以後來手動加入了 JSON 的部分:

所以全部是這樣:

Maicca Ej Feng

學習 Data Viz、Grafana、Graylog、Cisco DevNet、Elasticsearch、Metricbeat、Java Spring Boot MVC、Angular、NIRVANA-Kai、TSUBAME、Japanese……etc. 當中 :D

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store