這是一個非常好用，簡單明瞭的圖表製作框架，這裏就講一下基礎的Chart.js使用。需要注意的是Bootstrap上的Chart.js網站的文檔是1.x版本的，現在的是2.x版本的，用法上會有極大的不同，所以千萬不要看Bootstrap上的中文文檔，直接去官網http://www.chartjs.org/看就行。

用法上其實很簡單，HTML用<canvas>標籤，然後在JS中初始化這個標籤的元素，然後再用JS配置參數即可，主要是JS配置參數，別的都是死的。需要注意的是決定這個圖表的尺寸，是用包裹<canvas>的外層div的width屬性來決定的，只需要修改width屬性，高度自適應。直接修改<canvas>的寬高並沒有什麼卵用。

然後HTML和JS初始化都統一放在這裏，後面的文章就只講配置的參數了，配置的參數在初始化後面接下去寫就可以了。

<body>
	<div>
		<!-- chart.js的HTML元素 -->
		<canvas id="demoChart"></canvas>
	</div>

<script>
// 初始化這個chart HTML元素
var chartInit = $('#demoChart').get(0).getContext("2d");
</script>
</body>

一、折線圖（line）

1. 參數代碼樣例

new Chart(chartInit, {
	 type: 'line'
	,data: {
		 labels: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'June.', 'July.', 'Aug.', 'Sept.', 'Oct.', 'Nov.', 'Dec']
		,datasets: [{
			 label: '工資'
			,borderWidth: 2
			,borderColor: 'rgba(30, 144, 255, 1)'
			,backgroundColor: 'rgba(30, 144, 255, 0.7)'
			,data: [3500, 3000, 4000, 3700, 3200, 3500, 3400, 3600, 3200, 3500, 3800, 6800]
		}]
	},
	// 加了這個x軸, y軸最低數據就從0開始算, 不加就從最低的那個數據開始算
	options: {
        scales: {
            yAxes: [{
                ticks: {
                    min: 0
                }
            }]
        }
    }
});

1.1 參數代碼實現

（圖片模糊可以右鍵-在新標籤頁中打開圖片）

2. 參數說明

2.1 data-datasets屬性

Name	Type	Description
label	String/String[]	每個數據對應的那個標題，比方說1-12月的折線圖，1月的數據是200，label就是1月，label是數組，也可以是字符串，看你的需求了。
xAxisID	String	沒用過，不知道
yAxisID	String	沒用過，不知道
backgroundColor	Color	折線圖和x軸和y軸圈起來的區域的背景顏色
borderColor	Color	折線的顏色。
borderWidth	Number	折線的粗細，不寫就是0
borderDash	Number[]	折線的虛線之間的距離[0]就是不寫，寫了就是虛線了，數組裏只設一個值，就是虛線和距離一樣長
borderDashOffset	Number	折線的虛線之間的偏移量，非常細小的差距，改了都看不出來，比方說你這根虛線不想讓他的虛線到這個數據點上，那你就用這個往左移或者往右移（正負值）
borderCapStyle	String	折線的虛線邊框風格： 'butt':默認(方角), 'round': 比默認兩端長出一點(圓角), 'square': 比默認兩端長出一點(方角), 具體可以參考官方文檔
borderJoinStyle	String	折線折的那個角的風格：有三個值，參考官方文檔
cubicInterpolationMode	String	可以填兩個值：'dafault'或'monotone'，具體有什麼用不知道
fill	Boolean/String	沒用過，不知道
lineTension	Number	線的貝塞爾曲線張力，我理解是折線的彎曲度。可以是小數，我建議你在0-1之間取值，0是沒有曲線的折線，0.5應該是默認的，要是設20可能會有奇怪的驚喜。
pointBackgroundColor	Color/Color[]	折線圖上的數據點的填充顏色
pointBorderColor	Color/Color[]	折線圖上的數據點的邊框顏色
pointBorderWidth	Number/Number[]	折線圖上的數據點的邊框寬度
pointRadius	Number/Number[]	折線圖上的數據點的大小
pointStyle	String/String[]/Image/Image[]	折線圖上的數據點的風格 'circle': 圓圈 'cross': 一條小橫槓 'crossRot': 一個叉（×） 'dash': 還是一條橫槓，點的右邊多一點 'line': 還是一條橫槓，點在中間，兩邊一樣多 'rect': 正方形 'rectRounded': 圓角矩形 'rectRot': 菱形的正方形 'star': 看起來像"*"，反正不會是好看的五角星 'triangle': 正三角形使用自定義圖片請參考官方文檔
pointHitRadius	Number/Number[]	對鼠標做出反應的顯示數據點的大小，比方說你設置了pointRadius的大小很大，但是這個屬性沒有設置，就是說你鼠標移上去，要移到中間纔會有數據看到，那用戶體驗肯定很不OK了。
pointHoverBackgroundColor	Color/Color[]	鼠標移到折線圖的數據點上時點的背景顏色
pointHoverBorderColor	Color/Color[]	鼠標移到折線圖的數據點上時點的邊框顏色
pointHoverBorderWidth	Number/Number[]	鼠標移到折線圖的數據點上時點的邊框寬度
pointHoverRadius	Number/Number[]	鼠標移到折線圖的數據點上時點的大小
showLine	Boolean	是否顯示折線，當爲false的時候，線不顯示，但是點還在的
spanGaps	Boolean	false: 默認，如果一個標籤的數據是null或者沒有值，就會出現斷層，從下一個有值的數據點開始繼續顯示折線圖 true: 如果一個標籤的數據是null或者沒有值，折線會做彌補處理，繼續劃線到下一個有值的數據點上，但是這個標籤的數據點是沒有的
steppedLine	Boolean/String	false: 默認 true: 折線圖變成階梯折線 'before': 數據點在階梯矩形的左邊 'after': 數據點在階梯矩形的右邊

二、柱狀圖（bar）

1. 參數代碼樣例

new Chart(chartInit, {
	 type: 'bar'
	,data: {
		 labels: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'June.']
		,datasets: [{
			 label: '工資'
			,borderWidth: 2
			,borderColor: 'rgba(30, 144, 255, 1)'
			,backgroundColor: 'rgba(30, 144, 255, 0.7)'
			,data: [3500, 3000, 4000, 3700, 3200, 3500]
		}]
	},
	options: {
		scales: {
            yAxes: [{
                ticks: {
                    min: 0
                }
            }]
        }
    }
});

1.1 參數代碼實現

（圖片模糊可以右鍵-在新標籤頁中打開圖片）

2. 參數說明

2.1 data-datasets屬性

Name	Type	Description
label	String	你傳的數據的標題
xAxisID	String	沒用過，不知道
yAxisID	String	沒用過，不知道
backgroundColor	Color/Color[]	柱子的背景顏色
borderColor	Color/Color[]	柱子的邊框顏色，需要注意的是要和下面的屬性配合使用，不然就會無效
borderWidth	Number/Number[]	柱子邊框粗細
borderSkipped	String	用了不知道啥效果，總共4個值 'bottom': , 'left': , 'top': , 'right': ,
hoverBackgroundColor	Color/Color[]	鼠標移上去時顯示的背景色
hoverBorderColor	Color/Color[]	鼠標移上去時顯示的邊框色
hoverBorderWidth	Number/Number[]	鼠標移上去時顯示的邊框粗細

2.2 type屬性

'bar': 默認豎的柱狀圖,

'horizontalBar': 橫過來的柱狀圖

三、雷達圖（radar）

或者叫蛛網圖

1. 參數代碼樣例

new Chart(chartInit, {
	 type: 'radar'
	,data: {
		 labels: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'June.', 'July.', 'Aug.', 'Sept.', 'Oct.', 'Nov.', 'Dec']
		,datasets: [{
			 label: '胖虎工資'
			,borderWidth: 2
			,borderColor: 'rgba(30, 144, 255, 1)'
			,backgroundColor: 'rgba(30, 144, 255, 0.7)'
			,data: [3500, 3000, 4000, 3700, 3200, 3500, 3400, 3600, 3200, 3500, 3800, 6800]
		},{
			 label: '靜香工資'
			,borderWidth: 2
			,borderColor: 'rgba(0, 0, 0, 1)'
			,backgroundColor: 'rgba(0, 0, 0, 0.7)'
			,data: [3000, 3200, 4100, 3200, 3000, 3200, 3100, 3300, 3000, 3100, 3600, 5800]
		}]
	},
	options: {
		// 需要特別注意的是: 這裏的scale沒有s
		scale: {
			ticks: {
				 min: 0
			}
        }
    }
});

1.1 參數代碼實現

2. 參數說明

2.1 data-datasets屬性

Name	Type	Description
label	String	數據或數據集的標題
backgroundColor	Color	雷達線包圍區域的背景色
borderColor	Color	雷達線顏色
borderWidth	Number	雷達線粗細
borderDash	Number[]	雷達線虛線長度和虛線距離，數組裏只設一個值，就是虛線和距離一樣長
borderDashOffset	Number	雷達線虛線的偏移量，左移或右移，很細微的差距
borderCapStyle	String	雷達線的虛線邊框風格： 'butt':默認(方角), 'round': 比默認兩端長出一點(圓角), 'square': 比默認兩端長出一點(方角), 具體可以參考官方文檔
borderJoinStyle	String	雷達線折的那個角的風格：有三個值，參考官方文檔
fill	Boolean/String	沒用過，不知道
lineTension	Number	線的貝塞爾曲線張力，我理解是雷達線的彎曲度。可以是小數，我建議你在0-1之間取值，0是沒有曲線的折線，0.5應該是默認的，要是設20可能會有奇怪的驚喜。
pointBackgroundColor	Color/Color[]	數據點背景色
pointBorderColor	Color/Color[]	數據點邊框色
pointBorderWidth	Number/Number[]	數據點邊框粗細
pointRadius	Number/Number[]	數據點大小
pointStyle	String/String[]/Image/Image[]	雷達圖上的數據點的風格 'circle': 圓圈 'cross': 一條小橫槓 'crossRot': 一個叉（×） 'dash': 還是一條橫槓，點的右邊多一點 'line': 還是一條橫槓，點在中間，兩邊一樣多 'rect': 正方形 'rectRounded': 圓角矩形 'rectRot': 菱形的正方形 'star': 看起來像"*"，反正不會是好看的五角星 'triangle': 正三角形使用自定義圖片請參考官方文檔
pointHitRadius	Number/Number[]	對鼠標做出反應的數據點大小
pointHoverBackgroundColor	Color/Color[]	鼠標移上去時數據點背景色
pointHoverBorderColor	Color/Color[]	鼠標移上去時數據點邊框色
pointHoverBorderWidth	Number/Number[]	鼠標移上去時數據點邊框粗細
pointHoverRadius	Number/Number[]	鼠標移上去時數據點大小

四、餅圖（pie）和甜甜圈圖（doughnut）

或者叫環形餅圖、麪包圖，但是我還是喜歡叫甜甜圈圖：）

1. 參數代碼樣例

new Chart(chartInit, {
	 type: 'doughnut'// or 'pie'
	,data: {
		 labels: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'June.']
		,datasets: [{
			 label: '工資'
			,borderWidth: 0
			,backgroundColor: ['red', 'orange', 'yellow', 'green', 'cyan', 'blue']
			,data: [3500, 3000, 4000, 3700, 3200, 3500]
			,lineTension: 1
		}]
	},
});

1.1 參數代碼實現

參數說明：

// 時間關係，今天就寫到這，後面補上

// 其實有些不是沒用過，是用了不知道哪裏變了，希望有知道的小夥伴可以告訴我，謝謝大家！

// 我現在發現還有個更好的框架叫EChart.js，是百度出的，中文文檔，功能齊全，所以我打算去看看那個，這個先不寫了，不過這個也是有優點的，因爲他比較小，流暢，如果用戶對圖表沒有太大的要求，那就可以用這個了。

Chart.js 學習筆記

一、折線圖（line）

1. 參數代碼樣例

1.1 參數代碼實現

2. 參數說明

2.1 data-datasets屬性

二、柱狀圖（bar）

1. 參數代碼樣例

1.1 參數代碼實現

2. 參數說明

2.1 data-datasets屬性

2.2 type屬性

三、雷達圖（radar）

1. 參數代碼樣例

1.1 參數代碼實現

2. 參數說明

2.1 data-datasets屬性

四、餅圖（pie）和甜甜圈圖（doughnut）

1. 參數代碼樣例

1.1 參數代碼實現

IntelliJ IDEA 設置

解決Oracle數據庫ORA-28001

使用ActiveX控件打開IE瀏覽器

Java 中 BigDecimal 的 equals() 與 compareTo() 的區別

a 標籤傳參this

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結