开发者社区> 问答> 正文

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

用highcharts.js制作的图表,x轴是时间格式(yyyy-mm-dd hh:mm: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);
    }
}

展开
收起
a123456678 2016-07-07 14:51:38 4324 0
1 条回答
写回答
取消 提交回答
  • 在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:
    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]
    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]]
    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   "".
    2019-07-17 19:52:50
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载