highchar的x轴数据自动生成-优快云博客

本文介绍如何在Highcharts中自定义X轴的显示格式，包括设置日期时间格式及tooltip的展示方式。通过实例展示了如何使用Highcharts API来实现X轴格式的自定义。

highchars的x轴是可以根据数据自动生成的，不过数据类型就和以前不一样了
管网详细的例子：http://www.hcharts.cn/test/index.php?from=demo&p=16

其中x轴可以自定义格式

xAxis: {
    type: 'datetime',
    labels: {  
        formatter: function() {
        	//自定义显示格式
        	return (new Date(this.value)).Format("yyyy-MM-dd"); 
        }  
    }
},

最后选中的点的显示

tooltip: {
	enabled: true,
	formatter: function() {
		return '<b>'+ this.series.name +'</b><br/>'+(new Date(this.x)).Format("yyyy-MM-dd") +': '+ this.y +'';
	}
},

这是date加上Format的方法

Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

转载于:https://www.cnblogs.com/marx-luo/p/6713083.html