highCharts解决日期类型在x轴显示问题总结

废话不多说，上代码。

var lengquebeng_copChartOption = {

				chart : {
					type : 'spline',
					backgroundColor : null,
					renderTo : 'lengquebeng_saveEnergyChart'
				},
				plotOptions : {
					spline : {

						color : '#66CC00',
						dataLabels : {

							formatter : function() {

								return this.y * 100;
							}
						}
					}

				},
				title : {
					text : null,

				},
				xAxis : {
					 type: 'datetime',
			            dateTimeLabelFormats: { 
			                day: '%m-%d',
			            },
			            tickPixelInterval: 150 ,
						lineColor : '#FFF',
						tickColor : '#FFF',
						tickInterval :24 * 3600 * 1000,
						title : {
							align : 'high',
							text : '最近7日节能率',
							style : {
								color : '#EEE',
								fontSize : '11px'
							}
						},
						labels : {
							rotation: -45,
							style : {
								color : '#FFF',
								font : '12px'
							}
						}

					},
					credits : {
						enabled : false
					},
					yAxis : {
						lineColor : '#FFF',
						tickColor : '#FFF',
						labels : {
							style : {
								color : '#FFF',
								font : '12px'
							}
						},
						title : {
							text : '节能率（%）',
							style : {

								color : '#FFF',
								font : '12px'
							}
						},

						gridLineDashStyle : 'dash'
					},
					tooltip : {
						formatter: function () { 
		                    return Highcharts.dateFormat('%m-%d',this.x)+'
节能率:' + this.y.toFixed(2);  
		                }  
					},
				legend : {
					enabled : false
				},
				series : [ {} ]

			};
		var lengquebeng_copChart = new Highcharts.Chart(lengquebeng_copChartOption);

首先这是一个折线图，在上面这串代码中，有作用的是下面这段

xAxis : {
					 type: 'datetime',
			            dateTimeLabelFormats: { 
			                day: '%m-%d',
			            },
			            tickPixelInterval: 150 ,
						lineColor : '#FFF',
						tickColor : '#FFF',
						tickInterval :24 * 3600 * 1000,
						title : {
							align : 'high',
							text : '最近7日节能率',
							style : {
								color : '#EEE',
								fontSize : '11px'
							}
						},
						labels : {
							rotation: -45,
							style : {
								color : '#FFF',
								font : '12px'
							}
						}

					},
					credits : {
						enabled : false
					},
					yAxis : {
						lineColor : '#FFF',
						tickColor : '#FFF',
						labels : {
							style : {
								color : '#FFF',
								font : '12px'
							}
						},
						title : {
							text : '节能率（%）',
							style : {

								color : '#FFF',
								font : '12px'
							}
						},

						gridLineDashStyle : 'dash'
					},
					tooltip : {
						formatter: function () { 
		                    return Highcharts.dateFormat('%m-%d',this.x)+'
节能率:' + this.y.toFixed(2);  
		                }  
					},

我们可以看出，在x轴定义上面需要定义type和dateTimeLabelFormats,type很明确能表达思，而 dateTimeLabelFormats请参考我之前的 HighCharts日期及数值格式化

另外，我们需要注意到的是tooltip中Highcharts.dateFormat('%m-%d',this.x)这个，用语鼠标碰上去提示框的显示格式
。

数据的显示

if(rs.saveEnergyChart && rs.saveEnergyChart.length > 0){
					var datay = rs.saveEnergyChart.map(function(r, index, array) {
						t = new Date(r.time);
						v = r.value;
						return [t.getTime(), v ];
					});
				}
				console.log(datay);
				lengdongbeng_energyChart.series[0].setData(datax, true);

在往highcharts里面添加数据的时候，请注意日期格式，写成t.getTime(),转化成number格式，请参考JavaScript文档。其他就没什么了，欢迎纠错。