如何利用Flotr2外掛設定X軸並讓其顯示中文名稱

2019-12-11 21:56:13

在使用Flotr2圖形外掛設計圖形過程中，發現如果X軸設定成中文名稱，結果導致圖形不顯示出來；還可以使用colors設定柱子的顏色。下面利用一個範例說明如何解決這兩個問題，操作如下：

第一步，在開啟HBuilder編輯器工具，新建靜態頁面並引入jQuery和Flotr2的檔案，如下圖所示：

第二步，在body標籤元素內插入一個div標籤，然後使用ID屬性設定div標籤的寬度、高度和漸變顏色，如下圖所示：

第三步，在jQuery初始化函數內，定義X軸和Y軸的資料，分別使用序號定義不同點的資料，如下圖所示：

第四步，接著呼叫Flotr2中的draw()，DOM元素為bars，定義bars的寬度，如下圖所示：

第五步，儲存程式碼並在瀏覽器中預覽靜態頁面，可以發現X軸可以顯示中文，如下圖所示：

第六步，最後在draw()方法內，新增屬性colors，這個屬性設定柱子顏色，如下圖所示：