JavaScript可视化——Flotr2基础柱状图

最新推荐文章于 2024-03-14 11:54:06 发布

绝尘花遗落

最新推荐文章于 2024-03-14 11:54:06 发布

阅读量427

点赞数 2

分类专栏：前端文章标签： JS 可视化柱状图 Flotr2

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

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

创建基础的柱状图

Flotr2的github代码 https://github.com/HumbleSoftware/Flotr2

引入所需的JavaScript代码

<!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:600px;height:300px;"></div>
	</body>
	</html>

创建对应的div元素。

定义数据

var wins = [[
				[2006,13],
				[2007,11],
				[2008,15],
				[2009,15],
				[2010,18],
				[2011,21],
				[2012,28]
			]];

绘制图表

<script>
		window.onload = function() {
			var wins = [[
				[2006,13],
				[2007,11],
				[2008,15],
				[2009,15],
				[2010,18],
				[2011,21],
				[2012,28]
			]];
			Flotr.draw(
				document.getElementById("chart"),
				wins,
				{
					bars : {
						show:true
					}
				}
			);
		};
	</script>

在这里插入图片描述

改进纵轴

{
	bars : {
		show:true
	},
	yaxis : {
		min:0,
		tickDecimals:0
	}
}

在这里插入图片描述
设置最小值为0，通过tickDecimals显示展示的小数精度。

改进横轴

var wins = [[
	[0,13],
	[1,11],
	[2,15],
	[3,15],
	[4,18],
	[5,21],
	[6,28]
]];
var years = [
	[0,"2006"],
	[1,"2007"],
	[2,"2008"],
	[3,"2009"],
	[4,"2010"],
	[5,"2011"],
	[6,"2012"]
];
Flotr.draw(
	document.getElementById("chart"),
	wins,
	{
		bars : {
			show:true,
			barWidth:0.5
		},
		yaxis : {
			min:0,
			tickDecimals:0
		},
		xaxis: {
			ticks:years
		}
	}
);

通过用简单的0,1,2等数据替换了x值的实际年份。新定义的year数据中将这些整数映射到对应的字符串上。

通过barWidth属性进行调整。把这个属性值设置到0.5

在这里插入图片描述

调整样式

Flotr.draw(
	document.getElementById("chart"),
	wins,
	{
		title:"City Wins",
		colors:["#89AFD2"],
		bars : {
			show:true,
			barWidth:0.5,
			shadowSize: 0,
			fillOpacity:1,
			lineWidth:0,
		},
		yaxis : {
			min:0,
			tickDecimals:0
		},
		xaxis: {
			ticks:years
		},
		grid: {
			horizontalLines:false,
			verticalLines : false,
		}
	}
);

在这里插入图片描述

多彩的主题色彩

Flotr.draw(
	document.getElementById("chart"), 
	wins2, 
	{ 
		title: "Premier League Wins (2011-2012)",
		colors: ["#89AFD2", "#1D1D1D", "#DF021D", "#0E204B", "#E67840"],
		bars: { 
			show: true,
			barWidth: 0.5,
			shadowSize: 0,
			fillOpacity: 1,
			lineWidth: 0
		}, 
		yaxis: {
			min: 0,
			tickDecimals: 0
		}, 
		xaxis: { 
			ticks: teams
		}, 
		grid: { 
			horizontalLines: false,
			verticalLines: false
		}

	}
)