canvas(柱状图)

客官°小女子只卖身不卖艺 2022-06-03 02:55 197阅读 0赞

html:

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		canvas{
    			background: #ddd;
    		}
    	</style>
    </head>
    <body>
    	<h2>统计图</h2>
    	<canvas id="c2" width="500" height="400">
    		您的浏览器版本太低，请升级！
    	</canvas>
    	
    	<script src="js/jquery.min.js"></script>
    	<script>
    		//柱形图
    		var c2=document.getElementById('c2');
    		var ctx=c2.getContext('2d');
    		//画第一个柱形
    
    		$.get('php/1.php')
    		.then(data=>{
    			console.log(data);
    			data=JSON.parse(data);
    			var x=50;
    			for(var item of data){
    				var str=item.label;
    				var value=item.value;
    				ctx.strokeRect(x/*开始x坐标*/,350-parseInt(item.value)/*开始y坐标*/,50/*宽度*/,parseInt(item.value)/*高度*/);
    				ctx.fillText(str,x,350+20);
    				ctx.fillText(value,x,350-parseInt(item.value)-10);
    				x+=80;
    
    			}
    		});
    	</script>
    </body>
    </html>

php:

<?php 
    
    	require_once('init.php');
    
    	$sql="SELECT * FROM can_data";
    	$result=mysqli_query($conn,$sql);
    
    	echo json_encode(mysqli_fetch_all($result,1));
    ?>

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 213 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 577 阅读

相关 JFreeChar生成柱状图

前一篇文章说明了JFreeChar生成柱状图以及解决中文只能显示问方框的问题，本文主要记录柱状图的显示案例，可供初学者参考：先看一个简单的柱状图生成案例： \[java\

你的名字/ 2022年08月25日 08:29/ 0 赞/ 141 阅读

相关 hello chart——柱状图

先看一个例子： test.xml: <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:a

- 日理万妓/ 2022年06月18日 02:29/ 0 赞/ 163 阅读

相关 ECharts柱状图实例

ECharts柱状图实例 test.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//

古城微笑少年丶/ 2022年06月14日 04:23/ 0 赞/ 256 阅读

相关 echarts-柱状图

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年06月08日 09:40/ 0 赞/ 290 阅读

相关 echarts柱状图

引入echarts的js包echarts.min.js 事例地址：echarts.baidu.com/examples.html\chart-type-bar [htt

梦里梦外;/ 2022年06月07日 20:49/ 0 赞/ 245 阅读

相关 canvas(柱状图)

html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

客官°小女子只卖身不卖艺/ 2022年06月03日 02:55/ 0 赞/ 198 阅读

相关 echarts柱状统计图

目录一、简单的echarts柱状统计图二、柱状图和折线图混搭三、一个项目里同时用不同版本的echarts画图 -------------------- 一、

àì夳堔傛蜴生んèń/ 2022年01月30日 15:13/ 0 赞/ 662 阅读

相关通过Html5 Canvas画柱状图

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 离开园子一年多了，现在回来了。问我去哪里了？哈哈，其实哪

Myth丶恋晨/ 2022年01月16日 08:15/ 0 赞/ 354 阅读