2021-05-12 14:32:11
如何使用Flotr2圖形外掛設計柱狀圖展示圖形資料
2019-12-11 22:11:11
在我們使用Flotr2設計一個柱狀圖時，需要注意要設定圖形的寬度和高度，圖形資料中不能有中文（如果是X軸和Y軸一起的）。下面利用一個範例說明如何製作柱狀圖，操作如下：
1
第一步，雙擊開啟HBuilder開發工具，新建靜態頁面column.html，如下圖所示：
2
第二步，在<title></title>標籤下，插入一個flotr2和jquery這兩個核心檔案，如下圖所示：
3
第三步，接著在body標籤內，插入一個div標籤，並使用ID屬性值設定div的高度和寬度，如下圖所示：
4
第四步，在jquery初始化函數內，編寫flotr2的XY軸資料，呼叫draw()方法繪製圖形，如下圖所示：
5
第五步，儲存程式碼並開啟瀏覽器預覽靜態頁面，可以發現柱狀圖無柱子，如下圖所示：
6
第六步，將柱狀圖中的中文描述改為數位，然後再次儲存預覽，發現顯示了柱狀圖，如下圖所示：
相關文章