如何使用flotr2圖形外掛繪製一個折線圖並顯示

2019-12-11 23:26:28

flotr2是一個圖形外掛，這個外掛包含了很多圖形，如柱狀圖、折線圖、餅圖和散點圖等。其中，在設計折線圖時，需要新增lines屬性，否則折線圖不顯示。下面利用一個範例實現折線圖，操作如下：

第一步，雙擊開啟HBuilder編輯工具，新建一個靜態頁面lines.html，預設使用HTML5模板，如下圖所示：

第二步，在title標籤下方，引入jquery和flotr2核心檔案，注意先引入jquery，如下圖所示：

第三步，在<body></body>標籤內，插入一個div標籤，並利用ID選擇器設定容器的高度和寬度，如下圖所示：

第四步，在jquery初始化函數，呼叫flotr2中的方法，建立折線圖資料來源和初始化方法，如下圖所示：

第五步，儲存檔案並在瀏覽器中預覽圖形，結果發現折線圖沒有顯示出來，如下圖所示：

第六步，修改折線圖的資料來源data位置，新增屬性lines，再次儲存預覽圖形，發現折線圖顯示出來了，如下圖所示：