Highcharts 堆叠柱状图条形图 ajax读取json

最新推荐文章于 2021-09-23 15:58:38 发布

蜗牛前端

最新推荐文章于 2021-09-23 15:58:38 发布

阅读量735

点赞数 1

分类专栏： javascript 工具

本文链接：https://blog.csdn.net/qq_21113235/article/details/84882580

版权

javascript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

工具

3 篇文章 0 订阅

订阅专栏

效果图↑

json数据：

{
	"xvalue": ["北京", " 上海", "天津", "杭州", "四川","广州"],
	"series": [
				{
				"type": "column",
				"name": "2~5岁",
				"data": [1, 2, 1, 3, 4,5],
				"stack": "male",
				"color": "rgb(253,208,137)"
			}, {
				"type": "column",
				"name": "6~9岁",
				"data": [2, 3, 5, 7, 6,7],
				"color": "#FF7F79",
				"stack": "male"
			}, {
				"type": "column",
				"name": "10~12岁",
				"data": [4, 3, 3, 9, 1,4],
				"color":"rgb(160,68,110)",
				"stack": "male"
			}, {
				"type": "column",
				"name": "签约用户",
				"data": [3, 2.67, 3, 6.33, 3.33,4],
				"color": "#a1d1f9",
				"stack": "female"
			}
		]
}

json数据意义说明：

HTML文件：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
		<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
		<script src="https://img.hcharts.cn/jquery/jquery-2.1.4.min.js"></script>
		<script src="https://img.hcharts.cn/highcharts/themes/sunset.js"></script>
		<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
	</head>
	<body>
		<!--

*************************************************************************
   Generated by JShare at 2018-12-06 15:49:54
   From: https://jshare.com.cn/temp/h4Cxqf
*************************************************************************
 -->
		<div id="container" style="min-width:400px;height:400px"></div>
		<script>
			$(function() {
				//获取json数据并赋值
				$.getJSON("json/Child.json", function(res) {
					 console.log(res);
					var color, data, name, type, xvalue, stack;
					var array = [];
					var xvalue = res.xvalue;
					console.log(res.xvalue);
					var df = res.series;
					for (i in df) {
						color = df[i].color;
						data = df[i].data;
						name = df[i].name;
						type = df[i].type;
						stack = df[i].stack;
						array.push({
							color,
							data,
							name,
							type,
							stack
						})
					};
					var chart = Highcharts.chart('container', {
						credits: {
							//去掉右下角显示的Highcharts.com声明 
							enabled: false
						},
						exporting: {
							//去掉右上上角显示的菜单
							enabled: false
						},

						title: {
							text: '用户情况统计',
						},
						xAxis: {
							categories: xvalue,

						},
						plotOptions: {
							series: {
								stacking: 'normal'
							}
						},
						yAxis: {
							title: {
								text: '人数(万)'
							}
						},
						tooltip: {
							crosshairs: true, //当前数据背景颜色相应
							borderWidth: 0, //边框宽度
							borderRadius: 4, //圆角
							backgroundColor: 'rgba(50, 50, 50, 0.701961)',
							// shape:'square',//形状
							shadow: false, //阴影
							style: {
								padding: 10,
								color: '#fff',
								fontWeight: 'bold'
							},
						},
						series: array,
					});
				});

			})
		</script>
	</body>
</html>

这个完全由json控制数据，tip（提示框）我自定义了一下，要想更多自定义调整参考文档：https://api.hcharts.cn/highcharts#

其他的数据都很清晰，帖子的代码可直接运行，至于怎么模仿服务器获取json数据，

下载Hbuild,这个软件可以模拟服务器的环境

蜗牛前端

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Highcharts 堆叠柱状图条形图 ajax读取json

效果图↑json数据：{ "xvalue": ["北京", " 上海", "天津", "杭州", "四川","广州"], "series": [ { "type": "column", "name": "2~5岁", &q
复制链接

扫一扫