highcharts在x轴格式化时间输出?

wslk857208 发布于 2014/06/09 22:22
阅读 14K+
收藏 0

目的是x与y的值一一对应,所以data数据为:
[[1402319449324, 880], [1402319450325, 876], [1402319451325, 860], [1402319452325, 811], [1402319453325, 700], [1402319454325, 666], [1402319455325, 654], [1402319456326, 631], [1402319457326, 610], [1402319458326, 577], [1402319459326, 543], [1402319460326, 522], [1402319461326, 520], [1402319462326, 500], [1402319463326, 499], [1402319464326, 488], [1402319465327, 300], [1402319466327, 200], [1402319467327, 100], [1402319468327, 55]]
这样的二维数组,但是希望将上面的x时间格式化为2014-06-09 21:22:23 这样的格式显示

<script>
        $(function () {
            var data = '';
            $.ajax({
                type: 'post',
                dataType: 'json',
                async: false,
                url: '/home/blog/getData',
                success: function (msg) {
                    data = msg;
                    console.info(msg);
                }
            });
            $('#container').highcharts({
                chart: {
                    type: 'line'
                },
                title: {
                    text: 'Monthly Average Temperature'
                },
                subtitle: {
                    text: 'Source: WorldClimate.com'
                },
                xAxis: {
                    type: 'datetime',
                    dateTimeLabelFormats:
                {
                    second: '%Y-%b-%e %H:%M:%S.%L'
                }
                },
                tooltip: {
                    formatter: function () {
                        var time = new Date(this.x);
                        return '<b>' + this.series.name + '</b><br/>' + time.format('yyyy-MM-dd hh🇲🇲ss') + ' 剩余' + this.y + '个';
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: true
                    }
                },
                series: [
                    {
                        name: '名字',
                        data: data
                    }
                ]
            });
        });


        Date.prototype.format =function(format)
        {
            var o = {
                "M+" : this.getMonth()+1, //month
                "d+" : this.getDate(),    //day
                "h+" : this.getHours(),   //hour
                "m+" : this.getMinutes(), //minute
                "s+" : this.getSeconds(), //second
                "q+" : Math.floor((this.getMonth()+3)/3),  //quarter
                "S" : this.getMilliseconds() //millisecond
            }
            if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
                    (this.getFullYear()+"").substr(4- RegExp.$1.length));
            for(var k in o)if(new RegExp("("+ k +")").test(format))
                format = format.replace(RegExp.$1,
                        RegExp.$1.length==1? o[k] :
                                ("00"+ o[k]).substr((""+ o[k]).length));
            return format;
        }
    </script>



希望各位帮解决下。
加载中
0
傲罗
傲罗
我觉得这种情况下,js本来处理时间格式化就比较麻烦,用程序语言预先处理好输出数据吧
wslk857208
wslk857208
问题是后端处理得到的这个时间是字符串的形势 如何再x上均匀展示
0
Arrowing
Arrowing
官网都写得很清楚的,去看看吧,要载入时间解析插件
Arrowing
Arrowing
回复 @wslk857208 : 模块插件一般在modules文件夹里,现在的版本好像把date解析集成到主文件里去了,所以这里找不到,应该默认可以使用
wslk857208
wslk857208
回复 @arrowing : 时间格式化插件是哪一个js?
Arrowing
Arrowing
回复 @wslk857208 : 时间格式化的插件引入了吗?
wslk857208
wslk857208
回复 @arrowing :哦这个我加了的 
Arrowing
Arrowing
回复 @wslk857208 : http://www.hcharts.cn/api/index.php#xAxis.dateTimeLabelFormats
下一页
0
Arrowing
Arrowing

我也找不到了,你可以用这个替代

xAxis: {  
labels: {  
formatter: function() {  
return this.value; // clean, unformatted number for year  
}  
}  
},



返回顶部
顶部