bootstrap插件Chart.js使用案例-曲线图(Line chart)

发布时间:2017-11-03 编辑:小张个人博客 查看次数:40527

Chart.js简介

Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图、柱形图、雷达图、饼图、环形图等。在每种图表中,还包含了大量的自定义选项,包括动画展示形式。 Chart.js比较轻量,且不依赖其他库。

 Chart.js

Chart.js官方网址:http://www.chartjs.org/

Chart.js官方文档:http://www.chartjs.org/docs/latest/

Chart.js下载地址:https://github.com/chartjs/Chart.js

引入Chart.js文件

首先我们需要在页面中引入Chart.js文件。此工具库在全局命名空间中定义了Chart变量。

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

Chart.js-创建图表

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

<canvas id="canvas" height="300" width="950"></canvas>

Chart.js-数据结构

var lineChartData = {
labels : ["Mongodb","jquery","Laravel5","bootstrap","vue.js","Html5","CSS3","php","Linux","MySQL"],
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,140,29,15,25]
	},
	{
	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,127,100,36,52,34]
	}
]

}

Chart.js-图表参数

var defaults = {
	//网格线是否在数据线的上面
	scaleOverlay : false,

	//是否用硬编码重写y轴网格线
	scaleOverride : false,

	//** Required if scaleOverride is true **
	//y轴刻度的个数
	scaleSteps : null,

	//y轴每个刻度的宽度
	scaleStepWidth : 20,

	// Y 轴的起始值
	scaleStartValue : null,
	// Y/X轴的颜色
	scaleLineColor: "rgba(0,0,0,.1)",   
	// X,Y轴的宽度
	scaleLineWidth: 1,
	// 刻度是否显示标签, 即Y轴上是否显示文字
	scaleShowLabels: true,
	// Y轴上的刻度,即文字
	scaleLabel: "<%=value%>",
	// 字体
	scaleFontFamily: "'Arial'",
	// 文字大小
	scaleFontSize: 16,
	// 文字样式
	scaleFontStyle: "normal",
	// 文字颜色
	scaleFontColor: "#009966",
	// 是否显示网格
	scaleShowGridLines: true,
	// 网格颜色
	scaleGridLineColor: "rgba(0,0,0,.05)",
	// 网格宽度
	scaleGridLineWidth:2,
	// 是否使用贝塞尔曲线? 即:线条是否弯曲
	bezierCurve: true,
	// 是否显示点数
	pointDot: true,
	// 圆点的大小
	pointDotRadius:5,
	// 圆点的笔触宽度, 即:圆点外层白色大小
	pointDotStrokeWidth: 2,
	// 数据集行程(连线路径)
	datasetStroke: true,
	// 线条的宽度, 即:数据集
	datasetStrokeWidth: 2,
	// 是否填充数据集
	datasetFill: true,
	// 是否执行动画
	animation: true,
	// 动画的时间
	animationSteps: 60,
	// 动画的特效
	animationEasing: "easeOutQuart",
	// 动画完成时的执行函数
	//onAnimationComplete: null
}


当我们完成了在指定的canvas上实例化Chart对象之后,Chart.js会自动针对retina屏幕做缩放。

Chart对象设置完成后,我们就可以继续创建Chart.js中提供的具体类型的图表了。下面这个案例中,我们将展示如何绘制一幅曲线图(Line chart)。

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,defaults);

完整代码

<!doctype html>
<html>
<head>
	<title>Chart.js-拆线图</title>
	<script src="./Chart1.js"></script>
	<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
	<meta charset="UTF-8">
</head>
<body>	
   <canvas id="canvas" height="300" width="950"></canvas>
<script>
var lineChartData = {
labels : ["Mongodb","jquery","Laravel","bootstrap","vue.js","Html5","CSS3","php","Linux","MySQL"],
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,140,29,15,25]
	},
	{
		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,127,100,36,52,34]
	}
]

}
var defaults = {
	//网格线是否在数据线的上面
	scaleOverlay : false,

	//是否用硬编码重写y轴网格线
	scaleOverride : false,

	//** Required if scaleOverride is true **
	//y轴刻度的个数
	scaleSteps : null,

	//y轴每个刻度的宽度
	scaleStepWidth : 20,

	// Y 轴的起始值
	scaleStartValue : null,
	// Y/X轴的颜色
	scaleLineColor: "rgba(0,0,0,.1)",   
	// X,Y轴的宽度
	scaleLineWidth: 1,
	// 刻度是否显示标签, 即Y轴上是否显示文字
	scaleShowLabels: true,
	// Y轴上的刻度,即文字
	scaleLabel: "<%=value%>",
	// 字体
	scaleFontFamily: "'Arial'",
	// 文字大小
	scaleFontSize: 16,
	// 文字样式
	scaleFontStyle: "normal",
	// 文字颜色
	scaleFontColor: "#009966",
	// 是否显示网格
	scaleShowGridLines: true,
	// 网格颜色
	scaleGridLineColor: "rgba(0,0,0,.05)",
	// 网格宽度
	scaleGridLineWidth:2,
	// 是否使用贝塞尔曲线? 即:线条是否弯曲
	bezierCurve: true,
	// 是否显示点数
	pointDot: true,
	// 圆点的大小
	pointDotRadius:5,
	// 圆点的笔触宽度, 即:圆点外层白色大小
	pointDotStrokeWidth: 2,
	// 数据集行程(连线路径)
	datasetStroke: true,
	// 线条的宽度, 即:数据集
	datasetStrokeWidth: 2,
	// 是否填充数据集
	datasetFill: true,
	// 是否执行动画
	animation: true,
	// 动画的时间
	animationSteps: 60,
	// 动画的特效
	animationEasing: "easeOutQuart",
	// 动画完成时的执行函数
	//onAnimationComplete: null
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,defaults);
</script>

Chart.js曲线图(Line chart)



出处:小张个人博客

网址:http://blog.023xs.cn/

您的支持是对博主最大的鼓励,感谢您的认真阅读。欢迎转载,但请保留该声明。

顶部

Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1

联系方式:[email protected] | 本站文章仅供学习和参考

渝公网安备 50024102500267号