Question

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

有人可以帮忙吗？

Answer 1

此演示的问题是文件路径不正确。如果记录正在使用的窗口位置，则会看到它为空。试试：

console.log(window.location.origin)

在this thread上进行了讨论。

尝试将CSV放在您的（a）服务器上，然后使用标准路径名。例如：

csvURL:'https://myserver/data/test.csv'

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

1 个答案: