HTML5——Canvas图表插件 chart

2401_85013415

于 2024-05-15 23:30:20 发布

阅读量280

点赞数 10

分类专栏： 2024年程序员学习文章标签：物联网嵌入式硬件面试

本文链接：https://blog.csdn.net/2401_85013415/article/details/138927606

版权

2024年程序员学习专栏收录该内容

31 篇文章 1 订阅

订阅专栏

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

如果你需要这些资料，可以戳这里获取

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

    // 设置图表中水平轴显示的内容
    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
});


![在这里插入图片描述](https://img-blog.csdn.net/20181016145015541?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTE0MTA0NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)


 


#### （2）bar 柱状图


![在这里插入图片描述](https://img-blog.csdn.net/20181016150705708?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTE0MTA0NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

如何绘制柱状图


 


#### （3）radar 雷达图


![在这里插入图片描述](https://img-blog.csdn.net/20181016150602398?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTE0MTA0NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

雷达图


 


#### （4）polarArea 极地区域图


![在这里插入图片描述](https://img-blog.csdn.net/20181016151432730?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTE0MTA0NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

极地区域图


 


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



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


 


**饼状图**


![在这里插入图片描述](https://img-blog.csdn.net/20181016152338486?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTE0MTA0NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)


**环形图**  
![在这里插入图片描述](https://img-blog.csdn.net/20181016152554332?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTE0MTA0NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

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


 


#### （6）bubble 气泡图


![在这里插入图片描述](https://img-blog.csdn.net/20181016154400179?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTE0MTA0NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

气泡图


 


#### （7）混合图表



> 
> 混合图表必须是在图表类型为bar(柱状图)的基础上设置的。  
> ![在这里插入图片描述](https://img-blog.csdn.net/20181016165422808?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTE0MTA0NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
> 
> 
>

制作混合图表


* 


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


单纯的设置图表的`<canvas>`元素的`width`和`height`不起作用。  
 我们可用通过将图表的`<canvas>`元素包裹一层`<div>`，通过改变`<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>


![在这里插入图片描述](https://img-blog.csdn.net/20181016155549515?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTE0MTA0NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)


 


### 4.图表的配置


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


#### 图表独立配置


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


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

var options = {
    title :{
        display: true,
        text: '这是图表的标题!',
    }
};

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


![在这里插入图片描述](https://img-blog.csdn.net/20181016162648911?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTE0MTA0NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)


 


#### 图表全局配置


图表全局配置是对所有图表都起效果。  
 具体怎么用呢？  
![在这里插入图片描述](https://img-blog.csdn.net/20181016163108671?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTE0MTA0NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)


 


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




**收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。**
![img](https://img-blog.csdnimg.cn/img_convert/1e3b74431cb6dd2019ed0785e59ac1e6.png)
![img](https://img-blog.csdnimg.cn/img_convert/be0f3e26a11cc40d60534065f4e2fe0e.png)

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618679757)**

**需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**

**都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

图表全局配置是对所有图表都起效果。  
 具体怎么用呢？  
![在这里插入图片描述](https://img-blog.csdn.net/20181016163108671?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTE0MTA0NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)


 


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




**收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。**
[外链图片转存中...(img-auJxmiqb-1715786997684)]
[外链图片转存中...(img-uGoeyvnz-1715786997684)]

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618679757)**

**需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**

**都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**