小草帽的博客

记录自己的成长,积累、沉淀知识。同时,希望每一个来到我博客的人,可以在这里找你想要的答案。...

Chart.js绘制图表

Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。

基于HTML5 canvas技术,支持所有现代浏览器,并且针对IE7/8提供了降级替代方案。

不依赖任何外部工具库,轻量级(压缩之后仅有4.5k),并且提供了加载外部参数的方法。


一:chart.js快速使用

      在学习chart.js时,我百度了很多资料,有的博客虽然描写的很详细,但是不符合我的思维逻辑,我看的是云里雾里。最后,我选择了官方文档,去看每种图表的区别,总结共同,找出差异。(虽然是英文文档,但是我还是能够看懂它表达的意思。)

    

    下面展示:怎么样简单快速地使用chart.js,构建图表的一种方式。

 

二:绘制图表的步骤

 

A:引入Chart.min.js文件

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

B:Html创建画布

<div class="chart-container" style="margin-left: 50px; height:400px; width:500px">

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

</div>

给画布加个盒子限制画布大小,不限制的话canvas会填满最近的父元素

图表的类型有:饼状图,折线图,柱状图,环形图,极地图,雷达图

C:向画布上绘图

<script type="text/javascript">

// Get the context of the canvas element we want to select

var ctx = document.getElementById("myChart").getContext("2d");

var myBarChart = new Chart(ctx, {

type: 'pie', //指定表的类型

data: data //传入表的数据

//options:options图表的默认参数  可选参数

});

</script>

 

三:各种图表的参数

首先明确一点:绘制一个图表需要三个参数①指定图表类型②数据③opntion默认设置(可选,也就是可有可无)

 

饼状图和环形图

// For a pie chart

var myPieChart = new Chart(ctx,{

    type: 'pie',

    data: data,

    options: options

});

// And for a doughnut chart

var myDoughnutChart = new Chart(ctx, {

    type: 'doughnut',

    data: data,

    options: options

});


Data Structure()

数据data包含的内容 :lab(每项的名)和datasets

data = {

    datasets: [{

        data: [10, 20, 30]

    }],

 

    // These labels appear in the legend and in the tooltips when hovering different arcs

    labels: [

        'Red',

        'Yellow',

        'Blue'

    ]

};

 Data Structure部分是每种图表共有的,包含lab和datasets。区别在于datasets可以设置的内容不同。

 

下面每种图表只针对如何创建和Dataset Properties的独有属性进行展示。

 

 

Dataset Propertiesdatasets的属性:除了data数据外,其它都是可选属性

每种属性都是简单的英文,我就不做翻译了。(如果看不懂可以去官方网站,看文档,然后用有道等工具翻译理解)

 

 

饼状图实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/Chart.js"></script>
	</head>

	<body>
		<div style="height: 400px;width: 400px;">
			<canvas height="400px" width="400px" id="myChart">
										
			</canvas>
			<script type="text/javascript">
					// 设置参数
				var data = {
					labels: [
						"Red",
						"Blue",
						"Yellow"
					],
					datasets: [{
						data: [300, 60, 100],
						backgroundColor: [
							"#FF6384",
							"#36A2EB",
							"#FFCE56"
						],
						hoverBackgroundColor: [
							"#FF6384",
							"#36A2EB",
							"#FFCE56"
						]
					}]
				};
				// Get the context of the canvas element we want to select
				var ctx = document.getElementById("myChart").getContext("2d");
				var myBarChart = new Chart(ctx, {
					type: 'pie', //指定表的类型
					data: data //传入表的数据
				});
			</script>
		</div>
	</body>
</html>


Defualt-Optios不做详细列出。

 

柱状图/条形图

var myBarChart = new Chart(ctx, {

    type: 'bar',

    data: data,

    options: options

});

Dataset Properties

 


极地图

new Chart(ctx, {

    data: data,

    type: 'polarArea',

    options: options

});

Dataset Properties

 

 

折线图

var myLineChart = new Chart(ctx, {

    type: 'line',

    data: data,

    options: options

});


Dataset Properties

 

 

雷达图

var myRadarChart = new Chart(ctx, {

    type: 'radar',

    data: data,

    options: options

}); 


Dataset Properties

 

 

 

气泡图

// For a bubble chartvar myBubbleChart = new Chart(ctx,{

    type: 'bubble',

    data: data,

    options: options

});

Dataset Properties

Dataset Properties

 

 

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Sugar_map/article/details/79950508
文章标签: chart.js框架
个人分类: Web设计
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

Chart.js绘制图表

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭