2016-11-09 63 views
0

我有以下HTML/JS(取自一個Highcharts示例),旨在從CSV文件加載一些基本數據。但是當加載.htm時,它只是空白。HighCharts:從csv文件加載,在HTML/JS空白頁

我已經嘗試了各種東西,如在IE中使用F12查看控制檯;沒有錯誤。如果我查看源代碼,我可以正確地查看它應該的HTML。但該頁面只是空白。如果我使用IE的Debugger並在.get()行上放置斷點,Step Into似乎跳到了關閉get括號的底部?

CSV文件是在同一個文件夾中的.htm,和數據的模樣:

DateTime,Count 
    10/11/2016 00:00:00,20 
    10/12/2016 00:00:00,12 
    10/13/2016 00:00:00,5 

我證實有該文件的末尾沒有空行。

的HTML/JS:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Highcharts Example</title> 

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
     <style type="text/css"> 
${demo.css} 
     </style> 
     <script type="text/javascript"> 
    $(document).ready(function() { 
    // Get the CSV and create the chart 
    $.get('count_changes.csv', function (data) { 

     $('#container').highcharts({ 

      data: { 
       csv: csv 
      }, 

      title: { 
       text: 'Daily visits at www.highcharts.com' 
      }, 

      subtitle: { 
       text: 'Source: Google Analytics' 
      }, 

      xAxis: { 
       tickInterval: 7 * 24 * 3600 * 1000, // one week 
       tickWidth: 0, 
       gridLineWidth: 1, 
       labels: { 
        align: 'left', 
        x: 3, 
        y: -3 
       } 
      }, 

      yAxis: [{ // left y axis 
       title: { 
        text: null 
       }, 
       labels: { 
        align: 'left', 
        x: 3, 
        y: 16, 
        format: '{value:.,0f}' 
       }, 
       showFirstLabel: false 
      }, { // right y axis 
       linkedTo: 0, 
       gridLineWidth: 0, 
       opposite: true, 
       title: { 
        text: null 
       }, 
       labels: { 
        align: 'right', 
        x: -3, 
        y: 16, 
        format: '{value:.,0f}' 
       }, 
       showFirstLabel: false 
      }], 

      legend: { 
       align: 'left', 
       verticalAlign: 'top', 
       y: 20, 
       floating: true, 
       borderWidth: 0 
      }, 

      tooltip: { 
       shared: true, 
       crosshairs: true 
      }, 

      plotOptions: { 
       series: { 
        cursor: 'pointer', 
        point: { 
         events: { 
          click: function (e) { 
           hs.htmlExpand(null, { 
            pageOrigin: { 
             x: e.pageX || e.clientX, 
             y: e.pageY || e.clientY 
            }, 
            headingText: this.series.name, 
            maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' + 
             this.y + ' visits', 
            width: 200 
           }); 
          } 
         } 
        }, 
        marker: { 
         lineWidth: 1 
        } 
       } 
      }, 

      series: [{ 
       name: 'All visits', 
       lineWidth: 4, 
       marker: { 
        radius: 4 
       } 
      }, { 
       name: 'New visitors' 
      }] 
     }); 
    }); 

}); 
     </script> 
    </head> 
    <body> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/data.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 

<!-- Additional files for the Highslide popup effect --> 
<script src="https://www.highcharts.com/samples/static/highslide-full.min.js"></script> 
<script src="https://www.highcharts.com/samples/static/highslide.config.js" charset="utf-8"></script> 
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/samples/static/highslide.css" /> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

    </body> 
</html> 
+0

我不不要看你的系列數據在哪裏。 – bassxzero

+0

@bassxzero這是從一個工作示例中獲得的。那麼我錯過了什麼?我在示例中也沒有看到類似的東西。 – Zeno

+0

將$ .get('count_changes.csv',函數(數據)更改爲$ .get('count_changes.csv',函數(csv) – bassxzero

回答