JavaScript可视化———Flotr2饼图

最新推荐文章于 2021-06-15 11:23:55 发布

绝尘花遗落

最新推荐文章于 2021-06-15 11:23:55 发布

阅读量343

点赞数 1

分类专栏：前端文章标签： js 可视化 Flotr2 饼图

本文链接：https://blog.csdn.net/huayunhualuo/article/details/103514710

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

饼图

定义数据

根据世界银行在2008年底的报告

var data = [[
	[0,22.4],
	[1,77.6]
]]

绘制图表

Flotr.draw(
	document.getElementById("chart"),
	data,
	{
		pie:{
			show:true
		},
		yaxis:{
			showLabels:false,
		},
		xaxis:{
			showLabels:false,
		},
		grid:{
			horizontalLines: false,
			verticalLines: false,
		}
	}
);

在这里插入图片描述

标注数据

在这里插入图片描述

整体代码

<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset = "utf-8">
		<title></title>
		<script src = "js/flotr2.min.js"> </script>
	</head>
	<body> 
		<div id="chart" style="width:800px;height:400px;"></div>
	</body>
	<script>
		window.onload = function() {
			var data = [
				{data:[[0,22.4]], label:"Extreme Poverty"},
				{data:[[1,77.6]]}
			];
			Flotr.draw(
				document.getElementById("chart"),
				data,
				{
					title:"How Much of the World Lives on $1.25/Day?",
					pie:{
						show:true
					},
					yaxis:{
						showLabels:false,
					},
					xaxis:{
						showLabels:false,
					},
					grid:{
						horizontalLines: false,
						verticalLines: false,
					}
				}
			);
		}	
	</script>
</html>