Canvas图表插件

推荐三种比较好用的。

chart.js 灵活、可个性化设置图表样式的js图表插件
chartist.js 配置简单，只需要设置数据即可，包是最小的。
HighCharts.js 浏览器兼容性最强（有中文文档）

一、chart.js

chart.js是简单而灵活的javascript图表插件，底层封装了canvas，而且是复合目前主流的响应式。

官网下载chart.js

在这里插入图片描述
选择版本

dist下的就是chart.js脚本

Chart.js有两种不同的版本。常规版本的Chart.js和 Chart.min.js，附带chart.js库的同时还带着颜色解析器。如果你想使用这个版本并且在你的图表中使用时间轴，你需要在安装Chart.js之前安装上Moment.js。

而另一个版本Chart.bundle.js 和Chart.bundle.min.js早就包含了Moment.js 。你唯一需要注意的就是两个版本只能安装一个，否则会引起错误。

1.创建一个简单的图表

chart.js目前有两种版本1.0版本和2.0版本，两个版本创建图表的方式有区别。以下使用的是chart.js的2.0版本。

2.0版本

该方式是2.0版本新增的方式。

有4种方式获取<canvas>元素，任意一种都行，建议使用第二种。

var ctx = document.getElementById("myChart");	//dom
var ctx = document.getElementById("myChart").getContext("2d");	//dom
var ctx = $("#myChart");	//jquery

var ctx = "myChart";	//建议不要使用

使用chart.js

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'bar',	//图片类型
    data: {},		//数据和样式
    options: {}		//图表的配置
});
</script>

1.0版本

该方式是1.0版本的创建方法，在2.0版本中也可以使用。

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");

var myChart = Chart.bar(ctx, {
    data: {},		//图表数据和样式
    options: {}		//图表的配置
});
</script>

bar 只是图表的类型，也就是2.0版本中的type

2.图表

chart.js提供了图表类型中常用的几种：

line 折线图
bar 柱状图
radar 雷达图
doughnut 环状图
pie 饼状图
polarArea 极地区域图
bubble 气泡图
混合图

（1）line 折线图

在这里插入图片描述

var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx,{
	type: 'line',
	data:{
		labels: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
		datasets: [
			{
				label: '红线',
				data: [65,21,34,67,56,12,54,78,90,10,12,76],
				borderColor: 'rgba(255,0,0,1)',
				backgroundColor: 'rgba(255,0,0,0.5)',
				fill: false,
				lineTension: 0,
			},
			{
				label: '蓝线',
				data: [34,80,29,76,23,89,12,67,77,12,94,45],
				borderColor: 'rgba(75,193,193,1)',
				backgroundColor: 'rgba(75,193,193,1)',
				fill: false,
				lineTension: 0,
			}
		],
	},
	options:{

	}
});

dataset中常用的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折线图</title>
    <script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
    var ctx = document.getElementById("myChart").getContext("2d");

    // 设置数据内容
    var data = {
        // 设置图表中水平轴显示的内容
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        // 设置图表中的数据
        datasets: [
            {
                // 当前图表数据的标题内容
                label: "My First dataset",
                // 是否填充折线与水平轴中间的区域
                fill: true,
                // 设置折线数据点的贝塞尔曲线值（值为0时为折线）
                lineTension: 0.1,
                // 设置背景颜色
                backgroundColor: "rgba(75,192,192,0.4)",
                // 设置边框颜色
                borderColor: "rgba(75,192,192,1)",
                // 设置折线端点的样式
                borderCapStyle: 'butt',
                // 破折号的长度和间距
                borderDash: [],
                // 破折号的偏移量
                borderDashOffset: 0.0,
                // 设置折线交点的样式
                borderJoinStyle: 'miter',
                // 设置折线数据点的边框颜色
                pointBorderColor: "rgba(75,192,192,1)",
                // 设置折线数据点的背景颜色
                pointBackgroundColor: "#fff",
                // 设置折线数据点的边框宽度
                pointBorderWidth: 1,
                // 设置当鼠标悬停折线数据点时的半径
                pointHoverRadius: 5,
                // 设置当鼠标悬停折线数据点时的背景颜色
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                // 设置当鼠标悬停折线数据点时的边框颜色
                pointHoverBorderColor: "rgba(220,220,220,1)",
                // 设置当鼠标悬停折线数据点时的边框宽度
                pointHoverBorderWidth: 2,
                // 设置折线数据点的半径
                pointRadius: 1,
                //
                pointHitRadius: 10,
                // 设置折线中所有的数据
                data: [65, 59, 80, 81, 56, 55, 40],
                // 如果设置为true，将在没有数据或空数据的点之间绘制直线
                spanGaps: false,
            }
        ]
    };

    var options = {}
    var myLineChart = new Chart(ctx, {
    	type: 'line',
        data: data,
        options: options
    });
</script>
</body>
</html>

在这里插入图片描述

（2）bar 柱状图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如何绘制柱状图</title>
    <script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
    var ctx = document.getElementById("myChart").getContext("2d");

    var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1,
                data: [65, 59, 80, 81, 56, 55, 40],
            }
        ]
    };

    var options = {};

    var myBarChart = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: options
    });
</script>
</body>
</html>

（3）radar 雷达图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雷达图</title>
    <script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script>
</head>
<body>
    <div class="chart" style="width: 600px;height: 700px;">
        <canvas id="myChart"></canvas>
    </div>
<script>
    var ctx = document.getElementById("myChart").getContext("2d");

    var data = {
        labels: ["事业", "财运", "爱情", "人缘", "健康", "友情", "情亲"],
        datasets: [
            {
                label: "张三",
                backgroundColor: "rgba(179,181,198,0.2)",
                borderColor: "rgba(179,181,198,1)",
                pointBackgroundColor: "rgba(179,181,198,1)",
                pointBorderColor: "#fff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(179,181,198,1)",
                data: [65, 59, 90, 81, 56, 55, 40]
            },
            {
                label: "马四",
                backgroundColor: "rgba(255,99,132,0.2)",
                borderColor: "rgba(255,99,132,1)",
                pointBackgroundColor: "rgba(255,99,132,1)",
                pointBorderColor: "#fff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(255,99,132,1)",
                data: [28, 48, 40, 19, 96, 27, 100]
            },
            {
                label: "王五",
                backgroundColor: "rgba(25,99,132,0.2)",
                borderColor: "rgba(25,99,132,1)",
                pointBackgroundColor: "rgba(25,99,132,1)",
                pointBorderColor: "#fff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(25,99,132,1)",
                data: [48, 84, 43, 39, 69, 71, 100]
            }
        ]
    };
    var options = {};
    var myRadarChart = new Chart(ctx, {
        type: 'radar',
        data: data,
        options: options
    });
</script>
</body>
</html>

（4）polarArea 极地区域图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>极地区域图</title>
    <script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script>
</head>
<body>
    <div class="chart"  style="width: 600px;height: 700px;">
        <canvas id="myChart"></canvas>
    </div>

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

    var data = {
        datasets: [{
            data: [
                11,
                16,
                7,
                3,
                14
            ],
            
            backgroundColor: [
                "#FF6384",
                "#4BC0C0",
                "#66ccff",
            ],

            label: 'My dataset' // for legend
        }],
        labels: [
            "Red",
            "Green",
            "Yellow",
            "Grey",
            "Blue"
        ]
    };

    var options = {};

    var myPolarAreaChart = new Chart(ctx, {
        type: 'polarArea',
        data: data,
        options: options
    });
</script>
</body>
</html>

（5）pie 饼状图和 doughnut 环形图

饼状图和环形图就是 type参数不同

饼状图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script>
</head>
<body>
    <div style="width: 500px;height: 600px;">
        <canvas id="myChart"></canvas>        
    </div>

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

    var data = {
        labels: [
            "Red",
            "Blue",
            "Yellow"
        ],
        datasets: [
            {
                data: [300, 50, 100],
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ]
            }]
    };

    var options = {};

    var myPieChart = new Chart(ctx,{
        type: 'pie',
        data: data,
        options: options
    });

</script>
</body>
</html>

环形图
在这里插入图片描述

     var myDoughnutChart = new Chart(ctx, {
         type: 'doughnut',
         data: data,
         options: options
     });

（6）bubble 气泡图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>气泡图</title>
    <script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script>
</head>
<body>
    <div style="width: 500px;height: 400px;">
        <canvas id="myChart"></canvas>        
    </div>

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

    var data = {
        datasets: [
            {
                label: 'First Dataset',
                data: [
                    {
                        x: 20,
                        y: 30,
                        r: 15
                    },
                    {
                        x: 40,
                        y: 10,
                        r: 10
                    }
                ],
                backgroundColor:"#FF6384",
                hoverBackgroundColor: "#FF6384",
            }]
    };

    var options = {};

    var myBubbleChart = new Chart(ctx,{
        type: 'bubble',
        data: data,
        options: options
    });
</script>
</body>
</html>

（7）混合图表

混合图表必须是在图表类型为bar(柱状图)的基础上设置的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作混合图表</title>
    <script src="./public/js/Chart.js"></script>
</head>
<body>
    <div style="width: 500px;height: 400px;">
        <canvas id="myChart"></canvas>
    </div>
<script>
    var ctx = document.getElementById("myChart").getContext("2d");

    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Item 1', 'Item 2', 'Item 3'],
            datasets: [
                {
                    type: 'bar',
                    label: 'Bar Component',
                    data: [40, 20, 30],
                    backgroundColor : 'rgba(255,255,0,0.5)',
                },
                {
                    type: 'line',
                    fill: false,
                    borderColor: 'rgba(255,0,0,0.5)',
                    label: 'Line Component',
                    data: [40, 20, 30],
                }
            ]
        }
    });
</script>
</body>
</html>

3.改变图表的位置和大小

单纯的设置图表的<canvas>元素的width和height不起作用。
我们可用通过将图表的<canvas>元素包裹一层<div>，通过改变<div>的宽和高以及定位来改变图表。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>折线图</title>
	<style>
		div.chart{
			height: 400px;
			width: 300px;
			position: absolute;
			top: 100px;
			left: 100px;
		}
	</style>
</head>
<body>
	<div class="chart">
		<canvas id="canvas"></canvas>
	</div>

	<script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script>
	<script>
		var ctx = document.getElementById('canvas').getContext('2d');
		var chart = new Chart(ctx,{
			type: 'line',
			data:{
				labels: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
				datasets: [
					{
						label: '红线',
						data: [65,21,34,67,56,12,54,78,90,10,12,76],
						borderColor: 'rgba(255,0,0,1)',
						backgroundColor: 'rgba(255,0,0,0.5)',
						fill: false,
						lineTension: 0,
					},
					{
						label: '蓝线',
						data: [34,80,29,76,23,89,12,67,77,12,94,45],
						borderColor: 'rgba(75,193,193,1)',
						backgroundColor: 'rgba(75,193,193,1)',
						fill: false,
						lineTension: 0,
					}
				],
			},
			options:{

			}
		});
	</script>
</body>
</html>

在这里插入图片描述

4.图表的配置

chart.js的设置图表配置分为 图表全局配置 和 图表独立配置

图表独立配置

图表独立配置也就是使用图表构建方法中的options对象进行配置。只对设置的图表起效果。具体有哪些配置项建议去看官网的文档（官网文档已经目前已经去掉了每个图表类型的说明案例代码，指不定什么时候还能少点什么。。。）

案例1：给饼状图添加标题

    var options = {
        title :{
            display: true,
            text: '这是图表的标题!',
        }
    };
    
    var myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data: data,
        options: options
    });

在这里插入图片描述

图表全局配置

图表全局配置是对所有图表都起效果。
具体怎么用呢？
在这里插入图片描述

案例2：使用全局配置设置图表标题

	Chart.defaults.global.title.display = true;
    Chart.defaults.global.title.text = '这是图表的标题';

二、chartist.js

chart,js我们不仅要设置数据，同样也要设置样式。
而chartist.js只需要引入css和js设置数据即可，配置简单，使用起来比chart.js简单。（我感觉图表的样式还行，不算特别惊艳）

chartist.js的优势

配置简单
响应式
使用svg格式

官网 http://gionkunz.github.io/chartist-js/

三、HighCharts.js

HighCharts的优势：

兼容IE6+，兼容所有主流浏览器，包括iphone。
完美支持移动端，支持移动端的触摸事件
图表类型丰富
提示功能，鼠标移动到图表的某个点上有提示信息
官网和文档是中文的

官网 http://www.hightcharts.com/

HTML5 进阶（7）—Canvas图表插件 chart.js的基础使用以及其他图表插件推荐

Canvas图表插件

一、chart.js

官网下载chart.js

1.创建一个简单的图表

2.0版本

1.0版本

2.图表

（1）line 折线图

dataset中常用的属性

（2）bar 柱状图

（3）radar 雷达图

（4）polarArea 极地区域图

（5）pie 饼状图和 doughnut 环形图

（6）bubble 气泡图

（7）混合图表

3.改变图表的位置和大小

4.图表的配置

图表独立配置

图表全局配置

二、chartist.js

三、HighCharts.js

猜你喜欢

HTML5 进阶（7）—Canvas图表插件 chart.js的基础使用以及其他图表插件推荐

Canvas图表插件

一、chart.js

官网下载chart.js

1.创建一个简单的图表

2.0版本

1.0版本

2.图表

（1）line 折线图

dataset中常用的属性

（2）bar 柱状图

（3）radar 雷达图

（4）polarArea 极地区域图

（5）pie 饼状图 和 doughnut 环形图

（6）bubble 气泡图

（7）混合图表

3.改变图表的位置和大小

4.图表的配置

图表独立配置

图表全局配置

二、chartist.js

三、HighCharts.js

猜你喜欢

（5）pie 饼状图和 doughnut 环形图