javascript - 未捕获的类型错误：无法读取未定义的属性“toArrays”

Question

我试图让这段代码使用 gae-init 框架工作，该框架使用烧瓶和谷歌应用引擎。

如果我单独运行它，代码可以正常工作，全部来自这个文件：

<head>
   <title>Google Chart Example</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script src="http://prithwis.x10.bz/charts/jquery.csv-0.71.js"></script>
   <script src="https://www.google.com/jsapi"></script>
   <script type='text/javascript'>

   // load the visualization library from Google and set a listener
   google.load("visualization", "1", {packages:["corechart"]});
   google.setOnLoadCallback(drawChartfromCSV);

   function drawChartfromCSV(){
     // grab the CSV
         $.get("https://www.quandl.com/api/v3/datasets/WIKI/AAPL/data.csv?start_date=2015-01-01&order=asc&end_date=2015-04-01&collapse=daily", function(csvString) {

         // transform the CSV string into a 2-dimensional array
            var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

         // this new DataTable object holds all the data
            var data = new google.visualization.arrayToDataTable(arrayData);

         // this view can select a subset of the data at a time
            var view = new google.visualization.DataView(data);
            view.setColumns([0,3,1,4,2]);

            var options = {
              legend: 'none',

              candlestick: {
              fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
              risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
              },

              colors: ['black'],

              height: 700,

            };

            var chart = new google.visualization.CandlestickChart(document.getElementById('csv2chart'));

            chart.draw(view, options);
         });
   }
   </script>

</head>

<body>
  <div id="csv2chart"></div>
</body>

但是当我将它包含在我的项目中时，无论我尝试什么，我都会不断收到“Uncaught TypeError: Cannot read property 'toArrays' of undefined”。src 链接是正确的。我确定了。

# extends 'admin/admin_base.html'

# block title 
   Google Chart Example
# endblock

# block head
  {{super()}}
   <script src="{{ url_for('static', filename='ext/jquery/dist/jquery.js') }}"></script>
   <script src="{{ url_for('static', filename='new_static/jquery.csv-0.71.js') }}"></script>
   <script src="https://www.google.com/jsapi"></script>
   <script 'type=text/javascript'>


   // load the visualization library from Google and set a listener
   google.load("visualization", "1", {packages:["corechart"]});
   google.setOnLoadCallback(drawChartfromCSV);

   function drawChartfromCSV(){
     // grab the CSV

            $.get("https://www.quandl.com/api/v3/datasets/WIKI/AAPL/data.csv?start_date=2015-01-01&order=asc&end_date=2015-04-01&collapse=daily", function(csvString) {

         // transform the CSV string into a 2-dimensional array
            var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

         // this new DataTable object holds all the data
            var data = new google.visualization.arrayToDataTable(arrayData);

         // this view can select a subset of the data at a time
            var view = new google.visualization.DataView(data);
            view.setColumns([0,3,1,4,2]);

            var options = {
              legend: 'none',

              candlestick: {
              fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
              risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
              },

              colors: ['black'],

              height: 700,

            };

            var chart = new google.visualization.CandlestickChart(document.getElementById('csv2chart'));

            chart.draw(view, options);
         });
   }
   </script>
# endblock

# block admin_content

    <div id="csv2chart"></div>

# endblock

score 1 · Accepted Answer

我最终不得不<script type="text/javascript" src="{{ url_for('static', filename='new_static/jquery.csv-0.71.js') }}"></script>向下移动到中间的底部# block scripts # endblock

不是 100% 确定为什么，但我猜想与我正在使用的框架加载东西的顺序有关。

# extends 'admin/admin_base.html'

        # block title 
           Google Chart Example
        # endblock

        # block head
          {{super()}}
           <script src="{{ url_for('static', filename='ext/jquery/dist/jquery.js') }}"></script>
           <script src="https://www.google.com/jsapi"></script>
           <script 'type=text/javascript'>


           // load the visualization library from Google and set a listener
           google.load("visualization", "1", {packages:["corechart"]});
           google.setOnLoadCallback(drawChartfromCSV);

           function drawChartfromCSV(){
             // grab the CSV

                    $.get("https://www.quandl.com/api/v3/datasets/WIKI/AAPL/data.csv?start_date=2015-01-01&order=asc&end_date=2015-04-01&collapse=daily", function(csvString) {

                 // transform the CSV string into a 2-dimensional array
                    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

                 // this new DataTable object holds all the data
                    var data = new google.visualization.arrayToDataTable(arrayData);

                 // this view can select a subset of the data at a time
                    var view = new google.visualization.DataView(data);
                    view.setColumns([0,3,1,4,2]);

                    var options = {
                      legend: 'none',

                      candlestick: {
                      fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
                      risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
                      },

                      colors: ['black'],

                      height: 700,

                    };

                    var chart = new google.visualization.CandlestickChart(document.getElementById('csv2chart'));

                    chart.draw(view, options);
                 });
           }
           </script>
        # endblock

        # block admin_content

            <div id="csv2chart"></div>

        # endblock

    # block scripts
         <script type="text/javascript" src="{{ url_for('static', filename='new_static/jquery.csv-0.71.js') }}"></script>
    # endblock

score 0 · Accepted Answer

我有一个类似的情况，我通过以下方式解决了它，从函数中删除变量 csv 并使用“var ax = $.csv;”。为我工作。我认为在函数内部没有创建对象。

# extends 'admin/admin_base.html'

    # block title 
       Google Chart Example
    # endblock

    # block head
      {{super()}}
       <script src="{{ url_for('static', filename='ext/jquery/dist/jquery.js') }}"></script>
       <script src="https://www.google.com/jsapi"></script>
       <script 'type=text/javascript'>

       console.log($.csv);
       var ax = $.csv;   // <<< --- this change $.csv for ax !!!


       // load the visualization library from Google and set a listener
       google.load("visualization", "1", {packages:["corechart"]});
       google.setOnLoadCallback(drawChartfromCSV);

       function drawChartfromCSV(){
         // grab the CSV

                $.get("https://www.quandl.com/api/v3/datasets/WIKI/AAPL/data.csv?start_date=2015-01-01&order=asc&end_date=2015-04-01&collapse=daily", function(csvString) {
             console.log($.csv); //show "undefined"
             console.log(ax);    //show the csv object
             // transform the CSV string into a 2-dimensional array
                var arrayData = ax.toArrays(csvString, {onParseValue: ax.hooks.castToScalar});

             // this new DataTable object holds all the data
                var data = new google.visualization.arrayToDataTable(arrayData);

             // this view can select a subset of the data at a time
                var view = new google.visualization.DataView(data);
                view.setColumns([0,3,1,4,2]);

                var options = {
                  legend: 'none',

                  candlestick: {
                  fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
                  risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
                  },

                  colors: ['black'],

                  height: 700,

                };

                var chart = new google.visualization.CandlestickChart(document.getElementById('csv2chart'));

                chart.draw(view, options);
             });
       }
       </script>
    # endblock

    # block admin_content

        <div id="csv2chart"></div>

    # endblock

# block scripts
     <script type="text/javascript" src="{{ url_for('static', filename='new_static/jquery.csv-0.71.js') }}"></script>
# endblock

score 0 · Accepted Answer

0

检查您的代码 -$csv与$.csv

于 2015-08-05T08:17:48.780 回答

javascript - 未捕获的类型错误：无法读取未定义的属性“toArrays”

3 回答 3

Related

Reference