从本地csv文件加载的数据。网页在本地节点“连接”和“ serveStatic”网络服务器上运行。
导航器和xAxis显示的是数字而不是存储在csv文件中的日期,因此rangeselector和zoom无效。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
</head>
<body>
<div id="container" style="width:80%; height:600px;"></div>
</body>
<script>
$(function () {
var myChart = Highcharts.stockChart('container', {
title: {
text: 'Consumption'
},
xAxis: {
type: 'datetime',
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Kilogram'
}
},
navigator: {
xAxis: {
isInternal: true
},
yAxis: {
isInternal: true
}
},
data: {
csvURL: window.location.origin + '/trend.csv'
}
});
});
</script>
</html>
'isInternal'参数设置为解决this问题。
当我在菜单中选择“查看数据表”时,将显示以下内容:
Date Value
09-06-2018 18:00:15 1296.26098632813
09-06-2018 18:28:09 1451.98901367188
2 563.752014160156
3 429.237213134766
4 445.504516601563
5 1216.92199707031
...
日期有些奇怪。看起来只有前两行得到了正确处理。
任何人都可以看一下,也许会指出正确的方向吗?
csv文件中的示例
DateTime;Value
09/06/2018 18:00:15;1296.26098632813
09/06/2018 18:28:09;1451.98901367188
09/06/2018 18:56:03;563.752014160156
09/06/2018 19:23:57;429.237213134766