jQuery 實現Bootstrap Chart 圖表

時間 2019-11-16

標籤 jquery 實現 bootstrap chart 圖表欄目 JQuery 简体版

原文原文鏈接

不少時候咱們製做報表的時候須要圖表，若是你使用bootstrap開發你的網站，若是你須要使用圖表，那麼最簡單的方法就是就是使用bootstrap 的chart.js來實現圖表,下面介紹方法javascript

一、引入chart.js

1	<script src="Chart.js"></script>

二、建立圖表

爲了建立圖表，咱們要實例化一個Chart對象。爲了完成前面的步驟，首先須要須要傳入一個繪製圖表的2d context。css

1	<canvas id="myChart" width="400" height="400"></canvas>

1
2
3

//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);

當咱們完成了在指定的canvas上實例化Chart對象以後，Chart.js會自動針對retina屏幕作縮放。
Chart對象設置完成後，咱們就能夠繼續建立Chart.js中提供的具體類型的圖表了html

使用jQuery chart 繪製柱狀圖（Bar chart）

new Chart(ctx).Bar(data,options);
 
//數據結構
var data = {
	labels : ["January","February","March","April","May","June","July"],
	datasets : [
		{
			fillColor : "rgba(220,220,220,0.5)",
			strokeColor : "rgba(220,220,220,1)",
			data : [65,59,90,81,56,55,40]
		},
		{
			fillColor : "rgba(151,187,205,0.5)",
			strokeColor : "rgba(151,187,205,1)",
			data : [28,48,40,19,96,27,100]
		}
	]
}

效果以下圖所示：
java

使用jQuery chart 繪製曲線圖（Line chart）

new Chart(ctx).Line(data,options);
//數據結構
var data = {
	labels : ["January","February","March","April","May","June","July"],
	datasets : [
		{
			fillColor : "rgba(220,220,220,0.5)",
			strokeColor : "rgba(220,220,220,1)",
			pointColor : "rgba(220,220,220,1)",
			pointStrokeColor : "#fff",
			data : [65,59,90,81,56,55,40]
		},
		{
			fillColor : "rgba(151,187,205,0.5)",
			strokeColor : "rgba(151,187,205,1)",
			pointColor : "rgba(151,187,205,1)",
			pointStrokeColor : "#fff",
			data : [28,48,40,19,96,27,100]
		}
	]
}

效果以下圖所示：
bootstrap

使用jQuery chart 極地區域圖（Polar area chart）

new Chart(ctx).PolarArea(data,options);
//數據結構
var data = [
	{
		value : 30,
		color: "#D97041"
	},
	{
		value : 90,
		color: "#C7604C"
	},
	{
		value : 24,
		color: "#21323D"
	},
	{
		value : 58,
		color: "#9D9B7F"
	},
	{
		value : 82,
		color: "#7D4F6D"
	},
	{
		value : 8,
		color: "#584A5E"
	}
]

效果以下圖所示：
canvas

這裏只是幾個例子，更多的例子能夠參考 Bootstrap Chart.js 中文文檔數據結構