Question

我正在尝试使用gae-init框架来使用此代码，该框架使用了flask和Google应用引擎。

如果单独运行代码，代码就可以正常工作，只需从这一个文件中运行：

<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>

但是当我将它包含在我的项目中时，我一直得到＆＃34; Uncaught TypeError：无法读取属性＆＃39; toArrays＆＃39;未定义＆＃34;无论我尝试什么.. 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

Answer 1

我最终不得不将<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

Answer 2

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

不同

Answer 3

我有一个类似的案例，我通过以下方式解决了这一问题，从函数中删除了变量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

未捕获的TypeError：无法读取属性＆＃39; toArrays＆＃39;未定义的

3 个答案: