无法将本地csv数据加载到Highcharts中

问题描述 投票:0回答:1

我正在尝试从存储在本地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

有人可以帮忙吗?

javascript csv highcharts
1个回答
0
投票

此演示的问题是文件路径不正确。如果您记录您正在使用的窗口位置,您将看到它为空。尝试:

console.log(window.location.origin)

它在this thread上讨论过。

尝试将CS​​V放在(a)服务器上,然后使用完全限定的路径名​​。例如:

csvURL:'https://myserver/data/test.csv'
© www.soinside.com 2019 - 2024. All rights reserved.