转http://www.iteye.com/problems/78581
核心解决方法:
xAxis:{
labels:{
step:2;
}
}
你可通过设置labels里面的step属性X轴显示的间隔。上面就是间隔2显示
原文:
这个问题困扰了我很长时间,无奈怎样研究也不得其中要领。
我现在在做一个趋势图形的显示,简述如下:从数据库中得出一天的历史数据,这些数据隔15分钟一次,故共有96个点。
图形显示没问题,就是坐标轴显示有问题,主要是X轴的问题。
显示的曲线我截了个图,在附件中。
其中X轴的属性我是这么设置的
- xAxis: {
- maxZoom:3600000,
- startOnTick:'yes',
- endOnTick:'yes',
- minorTickInterval: 'auto',//设置是否出现纵向小标尺
- minorGridLineColor:'#E0E0E0',
- lineColor: '#197F07',//设置X轴颜色
- tickWidth: 1,//设置X轴坐标点是否出现占位及其宽度
- tickPixelInterval:40,//设置横坐标密度
- gridLineColor: '#E0E0E0',//设置纵向标尺颜色
- gridLineWidth: 1,//设置纵向标尺宽度
- title: {
- text: '时段(计时点)'
- }
- },
一般来说,可以在Axis内写入categories的值,这样就可以默认为x轴的坐标。如下
- Axis: {
- categories: <%=xAxisstr%>,//xAxisstr为时间hh:mm
- },
但是我发现,这样写根本不可行,挤在一起密密麻麻,用tickPixelInterval属性也没用。
我想在X轴显示:00:00,01:00...,24:00这样整点的标记,但是不知道怎么弄,上面那个代码,显示为:-5,0,5,10.....90,95,我也不知道为什么是从-5开始的。
另外大家还会知道,highcharts的tooltip功能,可以把鼠标放在曲线上,可以显示一些信息。
- tooltip: {
- formatter: function() {
- return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y;
- }
- },
苦于这里面的this.x需要在“Axis:”里面说明categories的值,而我说明categories的值的前提下,X轴又显示不好了,所以就把this.x删除了,改为如下,始终觉得不完美:
- tooltip: {
- formatter: function() {
- return '<b>'+ this.series.name +'</b><br/>'+this.y;
- }
- },
说了这么多,也不清楚说明白了没有。希望有大虾能看一下如何解决!谢谢谢谢!
问题补充:X轴显示的数据是从数据库取的,但是从数据库取有一个问题,就是最终显示出来密密麻麻的一团,暂时没有方法按照时间分段。意思就是,显示为: 00:00, 01:00...
而不是;00:15,00:30,00:45,这样数轴太挤了。
我想,既然x轴是固定死的,能不能直接写死X轴?有没有这样的方法?
另外,您说的取出的数据再进行封装,我不是很理解,因为highcharts的API我确实看了很多遍,也没弄懂。
谢谢您有空回复!
xuehua1987 写道
想问一下你X轴显示的数据是格式不正确呢,还是数据本身的值不正确?
如果你x轴显示的数据是从数据库中取出来的,那就把取出的数据封装成你要的格式,在传到highcharts相关设置中。你可以仔细看一下highcharts的API和其中的demo的js文件。
如果你x轴显示的数据是从数据库中取出来的,那就把取出的数据封装成你要的格式,在传到highcharts相关设置中。你可以仔细看一下highcharts的API和其中的demo的js文件。
问题补充:谢谢您,这样的方法我试了一下,还是不行,楼下的做法完全可行。谢谢您!
xuehua1987 写道
可以写死,你把死的时间段放进去,不要去数据库中取。
xAxis: {
categories: ['时间段1', '时间段2', '时间段3]
}
xAxis: {
categories: ['时间段1', '时间段2', '时间段3]
}
问题补充:激动了。。解决了!!谢谢!!
查看了一下highcharts API,对label{label}属性是这么说的:
step : Number 2.1
To show only every n'th label on the axis, set the step to n. Setting the step to 2 shows every other label. Defaults to null.
我目前积分为0,先把这个作为经验放到论坛里面吧,赚好了分,给这位大侠!
chenweick 写道
xAxis:{
labels:{
step:2;
}
}
你可通过设置labels里面的step属性X轴显示的间隔。上面就是间隔2显示
labels:{
step:2;
}
}
你可通过设置labels里面的step属性X轴显示的间隔。上面就是间隔2显示