highcharts中把X轴的名字竖着显示

Highcharts.chart(‘container‘, {
	chart: {
		type: ‘column‘
	},
	title: {
		text: ‘Auto rotation limit‘
	},
	subtitle: {
		text: ‘Short words means word-wrap makes sense‘
	},
	xAxis: {
		type: ‘category‘,
		labels: {
			formatter: function() {
				var labelVal = this.value;
				var reallyVal = ‘‘;
				var lvl = labelVal.length;
				if(lvl > 1){
					for(var i=1;i<=lvl;i++){
						reallyVal += labelVal.substr(i-1,1)+"<br/>";
					}
				}
				return reallyVal.substring(0,reallyVal.length-5);
			}
		}
	},
	series: [{
		showInLegend: false,
		data: [{
			name: ‘观音堂‘,
			y: 77
		}, {
			name: ‘石龙岩‘,
			y: 50
		}, {
			name: ‘王爷庙‘,
			y: 20
		}, {
			name: ‘佛子咀‘,
			y: 48
		}, {
			name: ‘老鹰岩‘,
			y: 36
		}, {
			name: ‘合江‘,
			y: 15
		}, {
			name: ‘哈哈哈‘,
			y: 57
		}]
	}]
});

  

原文地址:https://www.cnblogs.com/sily-boy/p/9875010.html

时间: 2024-11-09 12:44:12

highcharts中把X轴的名字竖着显示的相关文章

Highcharts中设置x轴为时间的写法

xAxis: { //表示为时间,注意大小写 type: 'datetime', //间距,时间戳,以下表示间距为1天,如果想表示间距为1周,就这么写 //7*24*3600*1000 tickInterval: 24 * 3600 * 1000, //格式化时间,day,week.... dateTimeLabelFormats: { day: '%Y-%m-%d' } } 有些在做跟时间有关数据展示的时候,首先想到的问题是我该传什么样的json格式数据来进行展示? 如下: data:[[时间

Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcharts#yAxis.tickmarkPlacement Highcharts属性与Y轴数据值刻度显示Y轴最小最大值 Highcharts.setOptions({global:{useUTC : false}}); $(function(){ //声明报表对象 var chart = new Hig

Highcharts中字符串处理方式(4)

Highcharts中字符串处理方式(4) 对于前面重复节点名字的问题,这个时候也可以解决了.解决方式就是为节点指定Highcharts允许的x值. [实例2-9:strdata2]下面解决实例2-7的问题.核心代码如下: series: [{ data: [92, 85, 89, 97, 91,[0,93]]    //指定最后一个节点的x值 }], xAxis: [{ type: 'category', categories:['第一次','第二次','第三次','第四次','第五次'] }

Highcharts中字符串处理方式(2)

Highcharts中字符串处理方式(2) 如果数据节点中出现相同的name,Highcharts并不会认为是相同的,会按照不同的刻度来处理. [实例2-7:strdata1]构建一个具有相同节点名称的图表.核心代码如下: series: [{ data: [ ['第一次', 92],     //相同节点名称 ['第二次', 85], ['第三次', 89], ['第四次', 97], ['第五次', 91], ['第一次',93]     //相同节点名称 ], keys:['name','

Highcharts中字符串处理方式(5)

Highcharts中字符串处理方式(5) 字符串作为y值 由于Highcharts不支持字符串作为y值,也不能将节点名称name解析到y轴上,所以只能采用实例2-9的方式进行转化. [实例2-10:strdatay]将某同学的成绩表生成图表,其成绩如表2.3所示.其中x值是考试次数,成绩作为y值. 表2.3 某同学考试成绩 核心代码如下: series: [{ data: [2, 1, 3, 2,3]      //将字符串转化为刻度值 }], yAxis: [{ type: 'categor

Highcharts中字符串处理方式(3)

Highcharts中字符串处理方式(3) 简化节点赋值 当图表中存在多个数据列,并且每个数据列的节点的x值都是相同的,也可以直接在x轴的设置中,直接指定由name构成的刻度.其代码如下: xAxis:[{ type:'category', categories:['第一次','第二次','第三次','第四次','第五次'] }] 这样做的结果就是将节点中的name和y值进行分离. [实例2-8:strdatasimple]下面简化实例2-6的节点数据,重新构成图表.核心代码如下: series

3D空间中射线与轴向包围盒AABB的交叉检测算法

引言 在上一节中,我讲述了如何实现射线与三角形的交叉检测算法.但是,我们应该知道,在游戏开发中,一个模型有很多的三角形构成,如果要对所有的物体,所有的三角形进行这种检测,就算现在的计算机运算能力,也是无法高效的完成.所以,我们需要通过其他的手段来提早剔除一些不可能发生交叉的物体,这种早退的思想,大量的运用在3D游戏技术中.在本篇文章中,我将像大家讲述如何实现射线与轴向包围盒AABB的交叉检测.如果读者不明白什么是轴向包围盒,请看这篇文章. Ray-AABB交叉检测算法 现如今,有很多的Ray-A

同学聚会宁夏【之七】——北师大历史系65 级同学在中阿之轴、西夏王陵、董府、板桥道堂、鸿乐府及告别宴会

北师大历史系65级同学在中阿之轴 北师大历史系65级同学在西夏王陵 北师大历史系65级同学在西夏王陵 北师大历史系65级同学在董府 北师大历史系65级同学在董府 北师大历史系65级同学在董府 北师大历史系65级同学在董府 北师大历史系65级同学在鸿乐府 北师大历史系65级同学在板桥道堂 北师大历史系65级同学告别宴会 北师大历史系65级同学告别宴会 北师大历史系65级同学告别宴会 北师大历史系65级同学告别宴会 北师大历史系65级同学告别宴会 北师大历史系65级同学告别宴会 北师大历史系65级同

iOS中如何该工程的名字

iOS中如何改工程的名字 例如我的工程名字是TwoTableView,点击"TwoTableView"->TARGETS下面的TwoTableView->点击右边的Bulid Settings->点击"All"->在右边的搜索框里面搜索Product Name ,可以看到,直接改需要的名字就可以了,注意这里的名字不能在你的工程里面显示,你运行以后,点住模拟器,Command+Shift+h就可以看到你刚才改的工程名字了. 测试环境:Xcode