我正在使用highstocks建立一个图表。 x轴上的日期值没有显示正确的日期，并在1970年开始。查看其他帖子我明白它需要以毫秒为单位格式化（自1970年1月1日起）。所以我在CSV文件中完成了这个并在http://www.epochconverter.com/上验证了它们，但仍然高的图表没有显示正确的日期/时间。我还尝试将x轴类型更改为＆＃39; datetime＆＃39;但仍然没有显示。
我理解一个解决方案是设置一个可行的pointStart和pointInterval，但我对此解决方案的问题是我每天提取数据并将其附加到CSV。我担心，无论出于何种原因，我的用于提取数据的脚本都没有运行一天，然后完成下一个，它将显示数据的错误日期。
下面是我的HTML代码，CSV文件和JS脚本格式以及正在显示的图表。我会在如何将日期显示为mm / dd / yyyy时提供任何帮助。
CSV文件：
Date,1457395200000,1457481600000,1457568000000,1457654400000,1457740800000,1457827200000,1457913600000,1458000000000,1458086400000
AUSTX,3862.94,4465.15,4247.64,3875.18,3263.06,3020.23,3309.66,3714.37,1573.27
CLBOH,2331,2662.17,2708.84,2375.02,1843.5,1812.71,2129.4,2273.38,918.63
GUID,2672.38,3164.67,2967.69,3141.39,2771.71,2469.85,2637.58,2792.44,1471.74
NYCNY,6627.41,7575.63,7383.43,6791.21,6339.03,6710.39,6302.29,6829.12,3251.16
ORNCA,11455.43,13908.57,13009.89,13008.68,11133,11028.88,11151.15,13015.48,7460.78
PKVCO,758.45,1242.89,769.35,770.14,745.31,650.31,696.03,726.53,414.16
RADNC,4374.73,5052.56,4889.06,4345.06,3884.03,3466.78,3632.1,3890.75,1142.66
SYRNY,2228.03,2419.88,2426.9,2202.09,1892.67,1948.18,2061.56,2334.07,934.85
$(document).ready(function() {
var options = {
chart: {
renderTo: 'content2',
defaultSeriesType: 'spline',
zoomType: 'x'
},
title: {
text: 'Usage(GiB) by Region',
align: 'center'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%m/%d/%Y',
week: '%m/%d/%Y',
month: '%m/%d/%Y',
year: '%m/%d/%Y',
},
categories: [],
labels: {
rotation: -45,
align: 'right'
}
},
yAxis: {
title: {
text: 'Usage(GiB)',
x: 5
},
labels: {
align: 'left',
x: 5
}
},
legend: {
enabled: true,
align: 'right',
// x: -400,
verticalAlign: 'middle',
y: -5,
floating: false,
backgroundColor: 'rgba(35, 35, 75, 1)', //(Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'dark-blue',
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
width: 140,
itemWidth: 140,
itemStyle: {
fontSize: '10px'
}
},
tooltip: {
// formatter: function() {
// return '<b>'+ this.x +'</b><br/>'+
// this.series.name +': '+ this.y +'<br/>'; //+
// 'Total: '+ this.point.stackTotal;
// }
},
plotOptions: {
series: {
// pointStart: Date.UTC(2016, 2, 3),
// pointInterval: 24 * 3600 * 1000, //one day`
marker: {
enabled: true,
radius: 4
},
states: {
hover: {
enabled: true,
lineWidth: 4
}
}//,
//events: {
// legendItemClick: function(event) {
// if (!this.visible)
// return false;
//
// var seriesIndex = this.index;
// var series = this.chart.series;
//
// for (var i = 0; i < series.length; i++)
// {
// if (series[i].index != seriesIndex)
// {
//
// series[i].visible ? series[i].hide() : series[i].show();
// }
// }
//
// return false;
// }
//}
},
column: {
// stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
exporting: {
//url: 'http://ubppapp01:8085/highcharts-export-web/',
buttons: {
exportButton: {
menuItems: [
{
text: 'Export to PNG',
onclick: function() {
this.exportChart();
}
}, {
text: 'Export Data',
onclick: function() {
location.href = file2
}
},
null,
null
]
}
}
},
navigation: {
buttonOptions: {
verticalAlign: 'bottom',
y: 0
}
},
navigator: {
enabled: false
},
rangeSelector:{
buttons:[{
type: 'day',
count: 14,
text: '14d'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'month',
count: 3,
text: '3m'
},
{
type: 'ytd',
text: 'YTD'
},
{
type: 'all',
text: 'All'
}],
selected: 0
},
scrollbar: {
enabled: false
},
series: []
};
$.get(file2, function(data) {
// Split the lines
var lines = data.split('\r');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line contains categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
var chart = new Highcharts.StockChart(options);
});
});<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dashboard Init</title>
<script type="text/javascript" src="resources/lib/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="resources/lib/highstock.js"></script>
<script type="text/javascript" src="resources/lib/modules/exporting.js"></script>
<script type="text/javascript" src="resources/lib/highcharts-scalable-yaxis-master/scalable-yaxis.js"></script>
<script type="text/javascript" src="resources/lib/themes/dark-blue.js"></script>
<!--[if IE]>
<script type="text/javascript" src="./js/excanvas.compiled.js"></script>
<![endif]-->
<script type="text/javascript">
var file2="resources/csv/wifi_usage_by_region_t2.csv"
</script>
<script SRC="resources/js/usage_by_region.js">
</script>
</head>
<body bgcolor="silver">
<br>
<p align="center"><big>Home</big>
<hr>
<div id="content2" style="width: 85%; height: 350px; margin: 0 auto"></div>
<br>
</body>
</html>
