2021-05-12 14:32:11
如何使用Flotr圖形外掛設計出多彩的柱狀圖顯示
2019-12-11 22:41:18
在使用Flotr2圖形外掛設計各種圖形時，可以根據自帶的屬性，設計出不同型別的圖形。我們常用的圖形有柱狀圖、折線圖、面積圖和餅圖等。下面利用具體的範例說明如何設計出多彩的柱狀圖，操作如下：
1
第一步，通過快捷方式開啟HBuilder編輯器，新建靜態頁面colors.html，如下圖所示：
2
第二步，修改title標籤中的文字內容，並引入Flotr2圖形外掛核心JS檔案，如下圖所示：
3
第三步，在主體標籤中插入一個div標籤元素，新增一個ID屬性，並使用ID選擇器設定背景漸變、寬度、高度和字型屬性，如下圖所示：
4
第四步，在jquery初始化函數內，編寫Flotr2圖形資料來源和初始化資料，如下圖所示：
5
第五步，儲存程式碼並開啟瀏覽器，直接在瀏覽器中預覽圖形，如下圖所示：
6
第六步，在圖形的draw()方法內，新增colors顏色陣列，設定不同的顏色，如下圖所示：
相關文章