Uncaught TypeError: Невозможно прочитать свойство 'toArrays' из неопределенного
Я пытаюсь заставить этот код работать, используя фреймворк gae-init, который использует флешку и движок приложений 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>
Но когда я включаю его в свой проект, я продолжаю получать "Uncaught TypeError: Невозможно прочитать свойство 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
3 ответа
Мне пришлось переехать <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
У меня был похожий случай, и я решил его следующим образом, удалив переменную 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