用highcharts制作的图表,x轴刻度间隔问题

倪闯 发布于 2012/05/17 10:20
阅读 24K+
收藏 1
       用highcharts.js制作的图表,x轴是时间格式(yyyy-mm-dd hh🇲🇲ss),数据是从后台传到jsp页面中的(已拼成json格式[{data:[[2012-01-01 09:09:09,0.12],[2012-01-02 09:09:28,0.32]}]),但现在x轴刻度是等距的,而且是固定的,我想让x轴的刻度根据传来的数据动态变化,即是不等距的,传来什么数据就在x轴上显示什么刻度,请问大家如何实现,谢谢了!
option={
         chart: {
            renderTo: 'container',
            type: 'line'
         },
         title: {
            text: 'HeartBeat Chart'
         },
         xAxis: {
   			type: 'datetime',
            
       //     maxPadding : 0.05,
         //   minPadding : 0.05,
          //  tickInterval : 360,
            labels: {
                formatter: function() {
                    return Highcharts.dateFormat('%Y-%b-%e %H:%M:%S', this.value);                  
                }
            },
            title: {
            	align: 'high',
            	text: 'Now'
            },
            tickmarkPlacement: 'between',
            tickPixelInterval: 154
		//	tickWidth:2000
         },
         yAxis: {
      //   	maxPadding : 0.05,  
     //       minPadding : 0.05, 
         	title: {
         		align: 'high',
         		text: 'Total Lag(s)'
         	}
         },
         plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            var xAxis=this.x;
                         	for(var i=0;i<10;i++)
				{	
				var u=option.series[0].data[i][0];
				if(xAxis==u){
                          	    $("#lag"+xAxis).show();
                          	    break;
                          	}else{
                            	    $("#lag"+u).hide();
                            	}
                            }

                        }
                    }
                }
            }
        },
         tooltip: {
         	crosshairs: [true],
               useHTML: true,
	      	formatter: function() {
	                return 'The value for <b>'+ this.x +
	                    '</b> is <b>'+ this.y +'</b>';
	            },
            valueDecimals: 2
        },
         series: []
      };
      var a=$("#dataPoint").val();
      var splitdata=$("#splitdata").val();//从后台传来的数据
      handleJsonDateData(a,splitdata);
      
});

//对json数据的处理函数
function handleJsonDateData(data,splitdata){
	if(data.indexOf("{")<0)
		return false;
	else{
		var array= eval ("("+data+")");
		var splitarray= eval ("("+splitdata+")");
		for(var i=0;i<splitarray.length;i++){
			var avb=splitarray[i][0];
			var date=Date.UTC(splitarray[i][0],splitarray[i][1],splitarray[i][2],splitarray[i][3],splitarray[i][4],splitarray[i][5]);
			array[0].data[i].unshift(date);
		}
		for(var j=0;j<array.length;j++){
	      	option.series.push(array[j]);
	    }

      chart=new Highcharts.Chart(option);
    }
}


以下是问题补充:

@倪闯:我想做的是x轴刻度是不等距的 (2012/05/17 14:43)
加载中
0
呵呵呵哥
呵呵呵哥

在series里面修改你的data源数据格式即下面data:2所示。http://www.highcharts.com/ref/#series--data,也可参照此例http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/type-datetime-irregular/
xAxis的type属性。

data : Array<Mixed>

An array of data points for the series. The points can be given in three ways:
  1. A list of numerical values. In this case, the numberical values will be interpreted and y values, and x values will be automatically calculated, either starting at 0 and incrementing by 1, or from pointStart and pointInterval given in the plotOptions. If the axis is has categories, these will be used. Example:
    data: [0, 5, 3, 5]
  2. A list of arrays with two values. In this case, the first value is the x value and the second is the y value. If the first value is a string, it is applied as the name of the point, and the x value is incremented following the above rules. Example:
    data: [[5, 2], [6, 3], [8, 2]]
  3. A list of object with named values. In this case the objects are point configuration objects as seen under options.point. Example:
    data: [{
    	name: 'Point 1',
    	color: '#00FF00',
    	y: 0
    }, {
    	name: 'Point 2',
    	color: '#FF00FF',
    	y: 5
    }]
Defaults to   "".
0
倪闯
倪闯
感谢狂人之草上飞,官网的文档我已经看过好多次了,都是实现不了,我想做的是x轴刻度不等距,不固定,不是时间类型的问题
0
灵羽
灵羽
@倪闯 这个刻度问题解决了吗?
0
倪闯
倪闯
@ 古代瑞兽  已经用了另外的方式实现了
倪闯
倪闯
回复 @古代瑞兽 : 用了flex
灵羽
灵羽
求教,用什么方式实现的?
0
C
Cxywzx

http://blog.yidijimao.net/?p=388

实测,可解决:

37 //经测试,不能把时间值放到categories里,必须放到series的data里面去
38 //这样是不行的:categories:[1274457600000,1274544000000,1274630400000]
39 //时间单位是毫秒,Unix时间戳乘上1000
40             series:[{    
41                     data:
42                     [
43                         [1274457600000, 1200], 
44                         [1274544000000, 1300], 
45                         [1274630400000, 1250],
46                         [1274803200000,1350]
47                     ]
48                     }]
49         };

 

返回顶部
顶部