jquery flot 開發記錄

2021-06-26 11:40:54 字數 1722 閱讀 8791

本人在官網

jquery 使用的是jquery-1.9.1.min.js.

在當中看了很多的幫助文件,問題如下:

1.在畫柱狀圖時,出現js報錯:

error: invalid dimensions for plot, width = 1098, height = 0 jquery.flot.js:135

容器div沒有設定高寬,如下:

就ok了

2.柱狀圖的x軸顯示錯誤,出現的是0,1,2....,本應顯示我的資料「**」,「火影」...

var data = ;

data.push(['**',3000]);

data.push([『火影』,20000]);

原因是x軸是預設數字顯示的, 如果沒有指定x軸的刻度資料, x軸就只會顯示0, 1, 2, ....

解決辦法我發現有2個: 一是

我們要自行建立x軸的刻度資料,     建立方式和資料來源一樣是用陣列

var data = ;

data.push([0,3000]);

data.push([1,20000]);

data.push([2,1000]);

var ticks = ;

ticks.push([0,"**"]);

ticks.push([1,"火影"]);

ticks.push([2,"廈門"]);

然後在xaxis設定x軸就可以了,如下:

二是使用mode: "categories",匯入jquery.flot.categories.js,資料格式直接使用最原始的資料就可以了,如下

var data = ;

data.push(['**',3000]);

data.push([『火影』,20000]);

展示的效果是一樣的,這種方法更簡單。

同時使用這兩種辦法畫時間x軸時,可以解決時間格式x軸不對齊的問題;如下:

var data = ;

data.push(['10/15',200]);

data.push(['10/16',100]);

xaxis: ,

原來是flot本身並不支援軸標籤的設定, 所以需要透過加入jquery.flot.axislabels.js外掛程式來達成軸標籤的設定.   

匯入這個js就可以了

4.畫圓形餅圖

可參考或者how-to-make-jquery-flot-pie-chart.html

要注意的是以下幾點:

(1)與柱狀圖一樣,如果不設定div的高寬,一樣會報錯,所以在畫餅圖之前要設定div的高寬

(2)如果想讓label顯示在餅圖外面,可以不設定label的radius屬性,預設就是在外面。

**如下:

WinCE 開發記錄

記錄 這幾天由於專案演示需要,要把原來基於pc settopbox的方案擴充套件到手持終端上,所以就接到了個任務,以最短時間把原來的版本移植到手持終端上,由於原來沒玩過window mobile,而且考慮到時間問題還有pda處理能力,因此就先做了個簡單的版本,不過今天完成出來的效果,還是挺炫d。終於...

C 開發記錄

1.比較兩個日期時間相差秒數 private int datediff datetime dt1,datetime dt2 2.程式單例項啟動 bool isstart var mutexrunningsingle new mutex true,程式唯一標識 out isstart if issta...

Css開發記錄

此博文為開發過程中遇到的問題,在此記錄 個人對css並不熟悉,所以只能暫時將遇到的問題記錄下來。1.遇到 2.有需求要將div的背景色設定為漸變色 參考 最後採用 w3c標準線性漸變語法 linear gradient to 例 background image linear gradient 0d...