我正在尝试从存储在本地csv文件中的数据创建一个Highchart,但我只是在html中得到一个“空白”图表。 Csv文件与html文件位于同一位置。
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Highcharts</title>
<script language="JavaScript" type="text/javascript" src="./code/jquery-3.3.1.min.js"></script>
<script language="JavaScript" type="text/javascript" src="./code/highcharts.js"></script>
<script language="JavaScript" type="text/javascript" src="./code/modules/data.js"></script>
<script language="JavaScript" type="text/javascript" src="./code/themes/gray.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:800px;"></div>
</body>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
xAxis: {
type: 'category'
},
data: {
// enablePolling: true,
csvURL: window.location.origin + 'test.csv',
itemDelimiter: ';',
lineDelimiter: '\n',
},
title: {
text: 'Fuel Consumption'
},
});
});
</script>
</html>
这是我的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
09/06/2018 19:51:51;445.504516601563
09/06/2018 20:19:45;1216.92199707031
09/06/2018 20:47:39;1108.98400878906
09/06/2018 21:15:34;478.514709472656
09/06/2018 21:43:28;649.652221679688
09/06/2018 22:11:22;159.626998901367
09/06/2018 22:39:16;135.208999633789
有人可以帮忙吗?
此演示的问题是文件路径不正确。如果您记录您正在使用的窗口位置,您将看到它为空。尝试:
console.log(window.location.origin)
它在this thread上讨论过。
尝试将CSV放在(a)服务器上,然后使用完全限定的路径名。例如:
csvURL:'https://myserver/data/test.csv'