chartjs 饼状图

 

之前要把canvas先清除掉,不然刷新数据,还会有前面的图表

function clearCanvas(){
			$('#donutChart').remove();
			$('#chartdiv').append('<canvas id="donutChart" style="min-height: 500px; height: 500px; max-height: 500px; max-width: 70%;">  </canvas>');
			container=document.getElementById("donutChart");
			context=container.getContext("2d");
		}

 

function ShowDishGroupPie(PieData)
		{
			// [{"totalcount":0,"title":"菜品总条数","id":1,"per":0}]
			// alert(PieData.dbCount);
			// alert(JSON.stringify(PieData.dbData));
			// var length = Object.keys(PieData.dbData).length;
			var labels =[];
			var data = [];

			PieData.dbData.forEach(function(val, index) {
				if(val.title != '菜品总条数' && val.title != '平均用时(分钟)' && val.title != '传菜条数')
				labels.push( val.title);
			});
			PieData.dbData.forEach(function(val, index) {
				if(val.title != '菜品总条数' && val.title != '平均用时(分钟)' && val.title != '传菜条数')
				data.push( val.totalcount);
			});
		
			// for(i=0;i<PieData.dbCount - 1;i++)
			// {
			// 	alert(PieData.dbData)
			// }

			var ctx = document.getElementById("donutChart").getContext("2d");
 
			var data = {
				labels:labels,
				datasets: [
					{
						data: data,
						backgroundColor: [
							"#FF6384",
							"#36A2EB",
							"#FFCE56",
							"#00FF00",
							"#D2691E",
							"#00FFFF",
							"#FF00FF"
						],
						hoverBackgroundColor: [
							"#FF6384",
							"#36A2EB",
							"#FFCE56",
							"#00FF00",
							"#D2691E",
							"#00FFFF",
							"#FF00FF"
						]
					}]
			};

			pieOptions = {};


			var myPieChart = new Chart(ctx,{
				type: 'pie',
				data: data,
				options: pieOptions
			});
		}
	</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/420990.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

一文搞懂 Transformer 工作原理 !!

文章目录 前言 一、单头Attention工作原理 二、多头Attention工作原理 三、全连接网络工作原理 前言 本文将从单头Attention工作原理、多头Attention工作原理、全连接网络工作原理三个方面&#xff0c;实现一文搞懂Transformer的工作原理。 Transformer工作原理 一、单头Atte…

【学习记录】Resnet

Resnet的残差块 BasicBlock模块&#xff1a; Resnet的作用 解决梯度消失。网络越深&#xff0c;会导致梯度消失。Resnet可以解决梯度消失的问题。 Resnet的原理 参考视频&#xff1a;https://www.bilibili.com/video/BV1cM4y117ob/?spm_id_from333.337.search-card.all.cl…

达梦数据库查询语句内存溢出问题解决

背景&#xff1a;达梦数据库使用过程中&#xff0c;某天突然服务宕机&#xff0c;导致各类后端服务无法注册到nacos上&#xff0c;重启之后nacos正常启动&#xff0c;可执行一条两千多条数据量的连表查询时间很长&#xff0c;甚至会报错&#xff0c;经查看日志发现在查询过程中…

恒创科技:服务器CPU核心和线程如何理解?

​  关于 CPU 核心和线程&#xff0c;是服务器处理能力的核心和灵魂&#xff0c;它们决定了服务器执行任务和同时处理多个操作的效率。 那么&#xff0c;服务器中的 CPU 核心和线程到底是什么?如何理解呢? 什么是CPU核心? CPU核心作为CPU(中央处理单元)的主要处理单元。该…

Windows下卸载JDK

操作步骤&#xff1a; 直接到windows程序卸载面板进行卸载 然后删除已配置的环境变量

Python调用ChatGPT API使用国内中转key 修改接口教程

大家好&#xff0c;我是淘小白~ 有的客户使用4.0的apikey ,直接使用官方直连的apikey消费很高&#xff0c;有一位客户一个月要消费2万&#xff0c;想使用4.0中转的apikey&#xff0c;使用中转的apikey 需要修改官方的openai库&#xff0c;下面具体说下。 1、首先确保安装的op…

在vue2中使用饼状图

1.引入vue2和echarts <script src"https://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js"></script> <script src"https://cdn.jsdelivr.net/npm/echarts5.4.0/dist/echarts.min.js"></script> 2.1 补充基本的body内容 <div id…

vscode起本地服务

下载这个 插件 Live Server (Five Server) 下载完会出现这个

政安晨【示例演绎虚拟世界开发】(二):Cocos Creator 配置工作环境并运行脚本

在这篇文章中&#xff0c;我们将会为Cocos Creator配置默认的脚本编辑器与预览浏览器&#xff0c;并在配置好的编辑器中实施Cocos Creator脚本编程工作。通过这篇文章&#xff0c;您将会掌握基础的脚本开发知识&#xff0c;同时会对Cocos Creator脚本编程有初步的认知。 配置外…

如何将一台电脑主机分裂成两台、三台?

有用户问&#xff1a;如何将一台电脑主机拆分成两台、三台甚至更多台使用&#xff1f; 这是什么意思&#xff1f; 简单解释一下&#xff1a;在一台计算机主机上&#xff0c;连接两台、三台或者更多台显示器&#xff0c;然后将这台主机的硬件资源分配给这些显示器&#xff0c;然…

退休开便利店真的靠谱吗?2024比较赚钱的创业项目排行

近日多个退休后开便利店赚钱的新闻登上热搜&#xff0c;但是&#xff0c;小编对此有疑问&#xff0c;退休的老年人开便利店真的是一个好选择吗&#xff1f; 第一、便利店最基本的转让费&#xff0c;装修费&#xff0c;进货等等&#xff0c;这笔开支非常大&#xff0c;足以掏空老…

librtmp源码分析

阅读了librtmp的源码&#xff0c;简单记录下。 首先补充下AMF格式基本知识 1 AMF格式 AMF是Action Message Format(动作消息格式)的简写&#xff0c;它是一种二进制的数据格式。它的设计是为了把actionscript里面的数据(包括Object, Array, Boolean, Number等)序列化成二进制…

Spring - InitializingBean、@PostConstruct、@Bean(initMethod = “init“)和构造方法执行优先级比较

执行顺序优先级 构造方法 > postConstruct > afterPropertiesSet > init方法 代码案例 Component public class InitializingBeanTest implements InitializingBean {public InitializingBeanTest(){System.out.println("构造方法");}Overridepublic void…

如何学习、上手点云算法(一):点云基础

写在前面 本文内容 点云算法的学习基础&#xff0c;入门方法&#xff0c;相关领域&#xff0c;资源&#xff0c;开源库&#xff0c;算法等的介绍&#xff1b; 以Open3D和PCL等为基础工具的点云处理代码讲解、实现&#xff1b; 文中涉及的参考以链接形式给出&#xff0c;涉及文…

计算机网络_2.1 物理层概述

2.1 物理层概述 一、物理层要实现的功能二、物理层接口特性 B站 深入浅出计算机网络 2.1物理层概述 一、物理层要实现的功能 物理层要实现的功能就是在各种传输媒体上传输比特0和1&#xff0c;进而给上面的数据链路层提供透明传输比特流的服务。 数据链路层“看不见”&#xff…

Golang 开发实战day01 - Variable String Numeric

Golang 教程01 - Variable String Numeric 1. Go语言的重要性 Go语言&#xff0c;又称Golang&#xff0c;是一种由Google开发的静态编译型编程语言。它于2009年首次发布&#xff0c;并在短短几年内迅速流行起来。Go语言具有以下特点&#xff1a; 语法简单易学&#xff1a;Go…

【C++从0到王者】第四十八站:最短路径

文章目录 一、最短路径二、单源最短路径 -- Dijkstra算法1.单源最短路径问题2.算法思想3.代码实现4.负权值带来的问题 三、单源最短路径 -- Bellman-Ford算法1.算法思想2.算法实现3.SPFA优化4.负权回路 四、多源最短路径 -- Floyd-Warshall算法1.算法思想2.算法实现 一、最短路…

项目解决方案:社会视频资源接入平台解决方案

目 录 一、项目背景 二、方案简述 1、监控功能 2、视频录像 三、系统构架 四、产品功能及特点 1、实时图像点播 2. 远程控制 3. 存储和备份 4. 历史图像的检索和回放 5、报警管理 &#xff08;1&#xff09;报警配置 &#xff08;2&#xff09;报警的…

优化Vue项目中 WebStorm:2023.3 对 CSS 和 HTML 的默认注释

前言 WebStorm是一种基于JetBrains IntelliJ平台的集成开发环境&#xff08;IDE&#xff09;&#xff0c;专门用于Web开发。它支持JavaScript、HTML和CSS等语言&#xff0c;并提供了丰富的功能和工具&#xff0c;以提高开发人员的效率。但是&#xff0c;在开发Vue项目中发现&a…

通过实验验证GAP、GMP、FC性能表现

深度学习 文章目录 深度学习一、背景二、什么是GAP三、GAP在Keras中的定义四、GAP VS GMP VS FC五、结论 一、背景 Global Average Pooling(简称GAP&#xff0c;全局池化层)技术最早提出是可以替代全连接层的一种新技术。在keras发布的经典模型中&#xff0c;可以看到不少模型…
最新文章