# PINGTEST 結合 Chart.js 網頁視覺化圖表

Demo : ( 需自行架設 janus server )

https://wastu01.github.io/Chartjs-demo/

進度：

- [x] 可以在網頁呈現靜態資料
- [x] 網頁點擊按鈕可以新增一筆靜態資料
- [x] 學習如何用 config setup 先把數值/畫圖函式區隔開

https://youtu.be/pFuibt5HNog?t=552

https://www.chartjs.org/docs/latest/configuration/

- [ ] 資料結構 array

如何傳遞資料

https://www.chartjs3.com/docs/chart/chart-js-array-series/1-array-variable-chart-js/

- [x] 如何移除首項

https://www.chartjs3.com/docs/chart/chart-js-viewers-questions/how-can-i-remove-array-elements-at-the-beginning-of-an-array-in-javascript-chart-js/

https://www.chartjs3.com/docs/chart/chart-js-array-series/4-array-unshift-chart-js/

- [x] 如何獲取時間

https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part3/datetime.html

- [x] 動態更新圖表 x 軸

JS 定時器使用方式及運作機制

https://ithelp.ithome.com.tw/articles/10209476

宣告setTimeout 重複呼叫自己會比 setInterval更好 setTimeout會確保執行緒執行完畢

---

Chartjs 常見問答：

https://www.chartjs3.com/docs/chart/chart-js-viewers-questions/

1. 如何僅為折線圖的最後一個數據點添加標籤
2. 如何使用下拉選單更新圖表數據集
3. 如何在懸停圖例時突顯相對應的甜甜圈圖區塊（第2部分）
4. 如何解決滑鼠離開後長條圖的點擊效果僅顯示突出的條形
5. 如何在長條圖頂端新增數據標籤
6. 如何在 JavaScript 中刪除陣列末尾的元素
7. 如何在 JavaScript 中刪除陣列開頭的元素
8. 如何在 JavaScript 陣列開頭新增新元素
9. 如何在 JavaScript 陣列末端添加新元素
10. 如何在 Chart.js 中獲得曲線而非直線
11. 如何通過點擊相對應的 div 顯示 Chart.js 中的數據點
12. 如何在圓環圖上新增圓角邊框
13. 如何在長條圖上新增圓角（Chart.js 3）
14. 如何使用按鈕在 Chart.js 中切換數據集
15. 如何製作自定義圖例
16. 如何截斷標籤同時在工具提示中保持完整值
17. 如何隱藏網格線（Chart.js 3）
18. 如何在圓環圖切片中垂直旋轉標籤文本
19. 如何隱藏長條圖中的 X 軸標籤
20. 如何在圖例框中顯示 x 值、y 值和標籤
21. 如何製作垂直漸變填充的折線圖
22. 如何在一頁中添加多個圖表
23. 如何為圓環圖中的單一資料點添加圓角邊框
24. 如何建立多顏色堆疊的堆疊條形圖
25. 如何縮短 y 軸上的長標籤
26. 如何根據值在圖表中指派顏色
27. 如何製作漸進折線圖
28. 如何配置折線圖的設置
29. 如何製作圓餅圖、長條圖、橫條圖
30. 如何點擊條形圖改變標籤
31. 如何使用圖表銷毀 API 並渲染新圖表
32. 如何使用時間刻度和輸入日期時間
33. 如何製作氣泡圖
34. 如何製作垂直漸變的長條圖
35. 如何在圖例標籤上添加圓角邊框

這些是 Chart.js 中常見的問題及解決方案的簡化翻譯。如果您需要更詳細的說明或示例，請隨時提問。

## 串接的資料：

Ping Test
https://www.groupworld.net/pingtest.html

Janus WebRTC Server
https://github.com/meetecho/janus-gateway

> [TOC]

1. 應該固定 x 軸數量，第一筆應移除
remove ： https://www.chartjs.org/docs/latest/developers/updates.html

- [x] 每新增一筆時，移除最舊的一筆

- [ ] 開發中

原生功能：

function addData(chart, label, newData, maxDataPoints) {
    if (chart.data.labels.length >= maxDataPoints) {
        // 如果數據點數量達到最大值，移除最舊的數據點
        chart.data.labels.shift(); // 移除第一個標籤
        chart.data.datasets.forEach((dataset) => {
            dataset.data.shift(); // 移除每個數據集的第一個數據點
        });
    }

    // 添加新的數據點
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(newData);
    });
    chart.update();
}

2. 點擊開始按鈕，抓取 pingtest 一組數值（第 Ｎ 個封包，Ping RTT 數值），然後更新圖表，更新頻率？幾秒動態更新一次？

3. 點擊結束後，停止動態更新圖表

4. 再次點擊，如何重置圖表？

# Chart.js Document

https://www.chartjs.org/docs/latest/getting-started/

https://chart.nodejs.cn

https://www.chartjs3.com/docs/chart/getting-started/

# Chart.js Sample

https://www.chartjs.org/docs/latest/samples/information.html

中文入門教學

https://how2j.cn/k/chartjs/chartjs-intro/2056.html

# 有幫助的資料

模擬網路品質圖表｜版本 2.9 語法應該有變

https://codepen.io/mrwang01/pen/zYegEZX?editors=1010

官網 ｜ Updating Charts
https://www.chartjs.org/docs/latest/developers/updates.html

Pop, Push ｜新增移除

調用函數語法中文解釋：

https://chenhailun.gitbooks.io/chartjs/content/di-liu-zhang-er-ci-kai-fa-xiang-guan.html

官網｜資料結構：

https://www.chartjs.org/docs/latest/general/data-structures.html

資料格式 中文圖文解釋

https://pluscdev.com/tutorial-chartjs/

# 整理

---

新版異動項目：｜x,y軸 文字顏色設定

https://stackoverflow.com/questions/75976261/how-to-change-the-color-of-a-specific-y-axis-in-chart-js

---

Pingtest.js 語法釐清：

$('#average_jitter').html(avg_jitter.toFixed(0));

語法：

[JavaScript Number toFixed() Method](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed)
> numObj.toFixed(); 整數後面要幾位小數，四捨五入

[jQuery 文檔操作- html() 方法](https://www.w3school.com.cn/jquery/manipulation_html.asp)

$(".btn1").click(function(){
  $("p").html("Hello <b>world</b>!");
});

https://ithelp.ithome.com.tw/articles/10206424

bind()：通過.bind()方法為元素綁定click、dblclick、 mousedown、mouseup…等事件。

https://developer.mozilla.org/zh-CN/docs/Web/API/Performance/now

計時用

https://blog.errorbaker.tw/posts/xiang/console-log/

console log 未來接『ping 數值』到圖表偵錯

https://kuro.tw/posts/2019/02/23/%E8%AB%87%E8%AB%87-JavaScript-%E7%9A%84-setTimeout-%E8%88%87-setInterval/

setTimeout-與-setInterval

https://www.explainthis.io/zh-hant/swe/script-link-in-html

`<script> `標籤應該放在 HTML 的什麼位置呢？
ans : 放在 </body> 之前

JSON.parse() 轉成 JSON

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/push

---

pingtest.js
目前只需要將某數值抓出來呈現即可

---

獲取時間模擬假資料

# 參考資料/其他圖表應用：

Chart.js 自學分享
https://alicialin2020.medium.com/chart-js-%E8%87%AA%E5%AD%B8%E5%88%86%E4%BA%AB-243e11851a47

使用chart.js 畫系統監控圖表
https://ccsig.blogspot.com/2019/01/chartjs.html?sc=1694504913950

Web 視覺化(一)：使用 Chart.js 輕鬆建立圖表
https://noob.tw/web-visualization-chartjs/

原生 Canvas :

https://ithelp.ithome.com.tw/articles/10198687

Anychart

https://docs.anychart.com/Working_with_Data/Data_Manipulation

echart

https://echarts.apache.org/zh/index.html

如何选择chart.js和Echarts——我为何放弃chart.js转战Echart？

https://juejin.cn/post/6970594322400378916

AJAX / google chart

https://ithelp.ithome.com.tw/questions/10214358?sc=rss.qu

(舊版本...不適用)

chart.js 图表刷新_Chart.js的花式，响应式图表

https://blog.csdn.net/culi4814/article/details/108380380

舊版本...

https://stackoverflow.com/questions/31059399/how-to-push-datasets-dynamically-for-chart-js-bar-chart

2.3 版 隨機生成動態圖表範例

https://jsfiddle.net/iamarasekera/oek1wan2/

Dynamically update values of a chartjs chart
解答有 2.9 版本適用方案

https://stackoverflow.com/questions/17354163/dynamically-update-values-of-a-chartjs-chart

## VM 架設 ＷＷＷ Server

https://ui-code.com/archives/667