2021-05-12 14:32:11
如何使用Flotr2圖形外掛呼叫方法繪製一個餅圖
2019-12-11 23:26:27
在Flotr2圖形設計過程中，其中表示資料比例，常用的圖形是餅圖。餅圖展示一個圓形，根據分塊展示對應的比例。下面利用一個範例說明製作餅圖並顯示，如下圖所示：
1
第一步，開啟HBuilder編輯工具，新建靜態頁面並引入jquery和flotr2檔案，如下圖所示：
2
第二步，插入一個div標籤，並新增ID屬性值，然後利用ID設定對應的寬度和高度，如下圖所示：
3
第三步，在jquery初始化函數內，定義flotr2餅圖資料來源並呼叫生成圖形的方法，如下圖所示：
4
第四步，儲存程式碼並開啟瀏覽器中預覽圖形，可以發現餅圖沒有顯示出來，如下圖所示：
5
第五步，在餅圖方法內，新增一個yaxis和xaxis兩個屬性，showLabels為false，如下圖所示：
6
第六步，再次儲存程式碼並在瀏覽器中預覽圖形，結果顯示出來了，如下圖所示：
相關文章