HTML5——Canvas图表插件 chart.js的基础使用

最新推荐文章于 2024-06-10 09:39:48 发布

时空如梦

最新推荐文章于 2024-06-10 09:39:48 发布

阅读量4.2k

点赞数 2

分类专栏： # HTML

原文链接：https://blog.csdn.net/weixin_39141044/article/details/83061516

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Canvas图表插件

推荐三种比较好用的。

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

一、chart.js

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

官网下载chart.js

进入官网： http://www.chartjs.org

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

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/

时空如梦

关注

2
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
HTML5——Canvas图表插件 chart.js的基础使用

Canvas图表插件推荐三种比较好用的。chart.js 灵活、可个性化设置图表样式的js图表插件 chartist.js 配置简单，只需要设置数据即可，包是最小的。 HighCharts.js 浏览器兼容性最强（有中文文档）一、chart.jschart.js是简单而灵活的javascript图表插件，底层封装了canvas，而且是复合目前主流的响应式。官网下载chart.js进入官网：http://www.chartjs.org选择版本dist下的就是chart..
复制链接

扫一扫