关于Highcharts柱状(column)图AJAX动态赋值的问题

标签: HighCharts  柱状图

前段时间自己做项目的时候用到Highcharts框架,在基础柱图的时候遇到了问题,经过不断尝试,最终成功显示,把代码贴出来供大家参考。

先贴出最后效果,然后来讲一下我遇到的问题。

1.关于两类柱状图的实现

官方的demo里面是直接写的,我刚开始想从后台传json拿到name,然后set到series里面,但是经过多次尝试,失败,所以这里series里的name就直接在前台写死。

series : [ {name : '收入'}, 
            {name : '支出'} ]

2.关于动态X轴的实现

我这里的X轴是在上方的datebox里选的时间往后面传的,连续的日期是在后台获得了开始日期和结束日期,创建了一个数组,然后把数组放在json字符串里面穿到的前台

for (var j = 0; j < length; j++) {
    $('#year').highcharts().xAxis[0].categories.push(dayX[j]);
}

以下是column chart的代码

$(function() {
			/*每个月的收入和支出比*/
			$('#year')
					.highcharts(
							{
								chart : {
									type : 'column'
								},
								title : {
									text : '收入支出表'
								},
								xAxis : {
									categories : [ '一月', '二月', '三月', '四月',
											'五月', '六月', '七月', '八月', '九月', '十月',
											'十一月', '十二月' ],
									crosshair : true
								},
								yAxis : {
									min : 0,
									title : {
										text : '金额(元)'
									}
								},
								tooltip : {
									headerFormat : '<span style="font-size:10px">{point.key}</span><table>',
									pointFormat : '<tr><td style="color:{series.color};padding:0">{series.name}: </td>'
											+ '<td style="padding:0"><b>{point.y:.1f}元</b></td></tr>',
									footerFormat : '</table>',
									shared : true,
									useHTML : true
								},
								plotOptions : {
									column : {
										pointPadding : 0.2,
										borderWidth : 0
									}
								},
								series : [ {name : '收入'}, 
								           {name : '支出'} ]
							});
			$.ajax({
				type : "GET",
				url : 'chart/year',
				dataType : 'json',
				success : function(result) {
					var data = new Array();
					for (var i = 0; i < 2; i++) {
						data[i] = new Array();
						for (var j = 0; j < 12; j++) {
							data[i].push(result[i].data[j]);
						}
					}
					$('#year').highcharts().series[0].setData(data[0]);
					$('#year').highcharts().series[1].setData(data[1]);
				},
			});
		});

		var beginSearchColumn = function() {
			$('#year')
					.highcharts(
							{
								chart : {
									type : 'column'
								},
								title : {
									text : '月收入支出'
								},
								xAxis : {
									categories : [],
									crosshair : true
								},
								yAxis : {
									min : 0,
									title : {
										text : '金额(元)'
									}
								},
								tooltip : {
									headerFormat : '<span style="font-size:10px">{point.key}</span><table>',
									pointFormat : '<tr><td style="color:{series.color};padding:0">{series.name}: </td>'
											+ '<td style="padding:0"><b>{point.y:.1f}元</b></td></tr>',
									footerFormat : '</table>',
									shared : true,
									useHTML : true
								},
								plotOptions : {
									column : {
										pointPadding : 0.2,
										borderWidth : 0
									}
								},
								series : [ {
									name : '收入'
								}, {
									name : '支出'
								} ]
							});

			var beginTime = $('#beginTimeColumn').datebox('getValue');
			var endTime = $('#endTimeColumn').datebox('getValue');
			$.ajax({
				type : "GET",
				url : 'chart/selectByTime',
				data : "beginTime=" + beginTime + "&endTimeString=" + endTime,
				dataType : 'json',
				success : function(result) {
					if (result[0].month !== undefined) {
						var data = new Array();
						var monthX = new Array();
						var length = result[0].month.length;
						for (k = 0; k < length; k++) {
							monthX.push(result[0].month[k]);
						}
						for (var j = 0; j < length; j++) {
							$('#year').highcharts().xAxis[0].categories
									.push(monthX[j]);
						}
						for (var i = 0; i < 2; i++) {
							month[i] = [];
							for (var j = 0; j < length; j++) {
								data[i].push(result[i].data[j]);
							}
						}
						$('#year').highcharts().series[0].setData(data[0]);
						$('#year').highcharts().series[1].setData(data[1]);
					} else if (result[0].day == null) {
						var data = new Array();
						for (var i = 0; i < 2; i++) {
							data[i] = new Array();
							for (var j = 0; j < 12; j++) {
								data[i].push(result[i].data[j]);
							}
						}
						for (var j = 1; j < 13; j++) {
							$('#year').highcharts().xAxis[0].categories.push(j
									+ "月");

						}
						$('#year').highcharts().series[0].setData(data[0]);
						$('#year').highcharts().series[1].setData(data[1]);
					} else {
						var data = new Array();
						var dayX = new Array();
						var length = result[0].day.length;
						for (k = 0; k < length; k++) {
							dayX.push(result[0].day[k]);
						}
						for (var j = 0; j < length; j++) {
							$('#year').highcharts().xAxis[0].categories
									.push(dayX[j]);
						}
						for (var i = 0; i < 2; i++) {
							data[i] = new Array();
							for (var j = 0; j < length; j++) {
								data[i].push(result[i].data[j]);
							}
						}
						$('#year').highcharts().series[0].setData(data[0]);
						$('#year').highcharts().series[1].setData(data[1]);
					}
				},
			})
		}


版权声明:本文为GJoice原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/GJoice/article/details/75163508

智能推荐

Qt 之 Query Model Example 解析

总体概括 Query Model Example主要演示了怎么使用QSqlQueryModel这个数据库查询模型类。其中包括创建普通的数据库查询模型、可编辑的数据库查询模型和自定义的数据库查询模型。普通(默认)的数据库查询模型是只读的(不可再模型中编辑数据,模型只通过视图展示数据);可编辑的数据库查询模型重写了QSqlQueryModel的flags()方法和setData()方法;自定义的数据库...

Flutter:Scaffold.of() called with a context that does not contain a Scaffold.

Flutter:Scaffold.of() called with a context that does not contain a Scaffold. 当我第一次点击按钮想要弹出底部消息时出现了如下错误 当BuildContext在Scaffold之前时,调用Scaffold.of(context)会报错。这时可以通过Builder Widget来解决,代码如下:...

【机器学习基础】线性回归

                                                        &nbs...

08-Vue实现书籍购物车案例

书籍购物车案例 index.html main.js style.css 1.内容讲解 写一个table和thead,tbody中每一个tr都用来遍历data变量中的books列表。 结果如下: 在thead中加上购买数量和操作,并在对应的tbody中加入对应的按钮。结果如下: 为每个+和-按钮添加事件,将index作为参数传入,并判断当数量为1时,按钮-不可点击。 结果如下: 为每个移除按钮添加...

堆排序

堆排序就是利用堆进行排序的方法,基本思想是,将代排序列构造成一个大根堆,此时整个序列的最大值就是堆顶的根节点。将它与堆数组的末尾元素交换,此时末尾元素就是最大值,移除末尾元素,然后将剩余n-1个元素重新构造成一个大根堆,堆顶元素为次大元素,再次与末尾元素交换,再移除,如此反复进行,便得到一个有序序列。 (大根堆为每一个父节点都大于两个子节点的堆) 上面思想的实现还要解决两个问题: 1.如何由一个无...

猜你喜欢

基础知识(变量类型和计算)

一、值类型 常见的有:number、string、Boolean、undefined、Symbol 二、引用类型 常用的有:object、Array、null(指针指向为空)、function 两者的区别: 值类型暂用空间小,所以存放在栈中,赋值时互不干扰,所以b还是100 引用类型暂用空间大,所以存放在堆中,赋值的时候b是引用了和a一样的内存地址,所以a改变了b也跟着改变,b和a相等 如图: 值...

Codeforces 1342 C. Yet Another Counting Problem(找规律)

题意: [l,r][l,r][l,r] 范围内多少个数满足 (x%b)%a!=(x%a)%b(x \% b) \% a != (x \% a) \% b(x%b)%a!=(x%a)%b。 一般这种题没什么思路就打表找一下规律。 7 8 9 10 11 12 13 14 15 16 17 18 19 20 28 29 30 31 32 33 34 35 36 37 38 39 40 41 49 50...

[笔记]飞浆PaddlePaddle-百度架构师手把手带你零基础实践深度学习-21日学习打卡(Day 3)

[笔记]飞浆PaddlePaddle-百度架构师手把手带你零基础实践深度学习-21日学习打卡(Day 3) (Credit: https://gitee.com/paddlepaddle/Paddle/raw/develop/doc/imgs/logo.png) MNIST数据集 MNIST数据集可以认为是学习机器学习的“hello world”。最早出现在1998年LeC...

哈希数据结构和代码实现

主要结构体: 实现插入、删除、查找、扩容、冲突解决等接口,用于理解哈希这种数据结构 完整代码参见github: https://github.com/jinxiang1224/cpp/tree/master/DataStruct_Algorithm/hash...