我试图让这段代码工作使用游戏初始化框架，它使用flask和谷歌应用程序引擎。
如果我单独运行它，代码工作得很好，它全部来自这个文件:
<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>
但是当我把它包含在我的项目中时，我一直得到"未捕获的类型错误:无法读取未定义的属性'toArrays'"，无论我尝试什么。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
我最终不得不将<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与$.csv不相同
我有一个类似的情况，我以以下方式解决它，从函数中删除变量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