一个关于Highcharts图形显示（坐标轴）的问题

转http://www.iteye.com/problems/78581

核心解决方法：

xAxis:{ 
    labels:{ 
        step:2; 
    } 
} 
你可通过设置labels里面的step属性X轴显示的间隔。上面就是间隔2显示 

原文：

这个问题困扰了我很长时间，无奈怎样研究也不得其中要领。 
我现在在做一个趋势图形的显示，简述如下：从数据库中得出一天的历史数据，这些数据隔15分钟一次，故共有96个点。 
图形显示没问题，就是坐标轴显示有问题，主要是X轴的问题。 

显示的曲线我截了个图，在附件中。 


其中X轴的属性我是这么设置的 

Java代码  

1. xAxis: {  
2. maxZoom:3600000,  
3. startOnTick:'yes',  
4. endOnTick:'yes',  
5. minorTickInterval: 'auto',//设置是否出现纵向小标尺  
6. minorGridLineColor:'#E0E0E0',  
7. lineColor: '#197F07',//设置X轴颜色  
8. tickWidth: 1,//设置X轴坐标点是否出现占位及其宽度  
9. tickPixelInterval:40,//设置横坐标密度  
10. gridLineColor: '#E0E0E0',//设置纵向标尺颜色  
11. gridLineWidth: 1,//设置纵向标尺宽度  
12. title: {  
13. text: '时段（计时点）'  
14. }  
15. },  

一般来说，可以在Axis内写入categories的值，这样就可以默认为x轴的坐标。如下 

Java代码  

1. Axis: {  
2. categories: <%=xAxisstr%>,//xAxisstr为时间hh:mm  
3. },  

但是我发现，这样写根本不可行，挤在一起密密麻麻，用tickPixelInterval属性也没用。 

我想在X轴显示：00:00,01:00...,24:00这样整点的标记，但是不知道怎么弄，上面那个代码，显示为：-5,0,5,10.....90,95，我也不知道为什么是从-5开始的。 

另外大家还会知道，highcharts的tooltip功能，可以把鼠标放在曲线上，可以显示一些信息。 

Java代码  

1. tooltip: {  
2. formatter: function() {  
3. return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y;  
4. }  
5. },  

苦于这里面的this.x需要在“Axis：”里面说明categories的值，而我说明categories的值的前提下，X轴又显示不好了，所以就把this.x删除了，改为如下，始终觉得不完美： 

Java代码  

1. tooltip: {  
2. formatter: function() {  
3. return '<b>'+ this.series.name +'</b><br/>'+this.y;  
4. }  
5. },  

说了这么多，也不清楚说明白了没有。希望有大虾能看一下如何解决！谢谢谢谢！ 

---

问题补充：X轴显示的数据是从数据库取的，但是从数据库取有一个问题，就是最终显示出来密密麻麻的一团，暂时没有方法按照时间分段。意思就是，显示为: 00:00, 01:00... 
而不是;00:15,00:30,00:45,这样数轴太挤了。 

我想，既然x轴是固定死的，能不能直接写死X轴？有没有这样的方法？ 

另外，您说的取出的数据再进行封装，我不是很理解，因为highcharts的API我确实看了很多遍，也没弄懂。 

谢谢您有空回复！ 

xuehua1987 写道

想问一下你X轴显示的数据是格式不正确呢，还是数据本身的值不正确？ 
如果你x轴显示的数据是从数据库中取出来的，那就把取出的数据封装成你要的格式，在传到highcharts相关设置中。你可以仔细看一下highcharts的API和其中的demo的js文件。

---

问题补充：谢谢您，这样的方法我试了一下，还是不行，楼下的做法完全可行。谢谢您！ 

xuehua1987 写道

可以写死，你把死的时间段放进去，不要去数据库中取。 
  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显示