jQuery 实现Bootstrap Chart 图表

Posted 大西瓜3721

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery 实现Bootstrap Chart 图表相关的知识,希望对你有一定的参考价值。

很多时候我们制作报表的时候需要图表,如果你使用bootstrap开发你的网站,如果你需要使用图表,那么最简单的方法就是就是使用bootstrap 的chart.js来实现图表,下面介绍方法

1、引入chart.js

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

2、创建图表

为了创建图表,我们要实例化一个Chart对象。为了完成前面的步骤,首先需要需要传入一个绘制图表的2d context。

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中提供的具体类型的图表了

使用jQuery chart 绘制柱状图(Bar chart)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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]
		}
	]
}

效果如下图所示:
技术分享

使用jQuery chart 绘制曲线图(Line chart)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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]
		}
	]
}

效果如下图所示:
技术分享

使用jQuery chart 极地区域图(Polar area chart)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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"
	}
]

效果如下图所示:
技术分享

这里只是几个例子,更多的例子可以参考 Bootstrap Chart.js 中文文档





以上是关于jQuery 实现Bootstrap Chart 图表的主要内容,如果未能解决你的问题,请参考以下文章

标签页(tab)切换的原生js,jquery和bootstrap实现

在 Ionic 框架中使用 Chart.js 和 jQuery

Bootstrap 与 Jquery validate 结合使用——多个规则实现

asp.netajax与jquery和bootstrap的无刷新完美实现

jquery, jquery-ui, requirejs, bootstrap 的关系理解

bootstrap与jQuery结合的动态进度条