使用flask在Javascript上提供json数据
我想将我的csv数据提供给google charts for bubble chart,但我没有什么问题,我无法创建数组 这是我的python数据使用flask在Javascript上提供json数据,javascript,python,flask,Javascript,Python,Flask,我想将我的csv数据提供给google charts for bubble chart,但我没有什么问题,我无法创建数组 这是我的python数据 ``` python_data = { 'some_list': ["USA", "CN", "EU"], 'some_list_2': [2, 5, 8], 'some_list_3': [2, 3, 4], 'some_list_4': [40, 500, 68]} ``` 我想像这样在js中提供这些数
```
python_data = {
'some_list': ["USA", "CN", "EU"],
'some_list_2': [2, 5, 8],
'some_list_3': [2, 3, 4],
'some_list_4': [40, 500, 68]}
```
我想像这样在js中提供这些数据
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Population'],
['CAN', 80.66, 1.67, 33739900],
['DEU', 79.84, 1.36, 81902307],
['DNK', 78.6, 1.84, 5523095],
['EGY', 72.73, 2.78, 79716203],
['GBR', 80.05, 2, 61801570],
['IRN', 72.49, 1.7, 73137148],
['IRQ', 68.09, 4.77, 31090763],
['ISR', 81.55, 2.96, 7485600],
['RUS', 68.6, 1.54, 141850000],
['USA', 78.09, 2.05, 307007000]
]);
在一天的最后一天,我想在我的flask网站上运行这个功能
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Correlation between life expectancy, fertility rate ' +
'and population of some world countries (2010)',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
fontSize: 12,
fontName: 'Times-Roman',
color: 'green',
bold: true,
italic: true
}
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));
chart.draw(data, options);
}
</script>
load(“当前”{packages:[“corechart”]});
google.charts.setOnLoadCallback(drawChart);
函数绘图图(){
var data=google.visualization.arrayToDataTable([
[‘ID’、‘预期寿命’、‘生育率’、‘地区’、‘人口’],
[CAN',80.66,1.67',北美',33739900],
[DEU',79.84,1.36,'Europe',81902307],
[DNK',78.6,1.84,'欧洲',5523095],
[EGY',72.73,2.78,'中东',79716203],
[GBR',80.05,2,'欧洲',61801570],
[IRN',72.49,1.7,'中东',73137148],
[IRQ',68.09,4.77,'中东',31090763],
[ISR',81.55,2.96,'中东',7485600],
[RUS',68.6,1.54,'Europe',141850000],
[美国,78.09,2.05,北美,307007000]
]);
变量选项={
标题:“预期寿命和生育率之间的相关性”+
"世界部分国家人口(2010)",,
哈克斯:{标题:'预期寿命'},
vAxis:{title:'生育率'},
气泡:{
文本样式:{
尺寸:12,
fontName:‘时代罗马’,
颜色:“绿色”,
黑体字:对,
斜体:对
}
}
};
var chart=new google.visualization.BubbleChart(document.getElementById('textstyle');
图表绘制(数据、选项);
}
感谢您的关注和帮助:)您基本上有两个选择:
- 使用Flask模板系统创建javascript变量(请参见此处接受的答案:)
- 从javascript脚本向Flask应用程序发出AJAX调用。Flask文档在这里有一个简单的示例(使用jQuery,但可以适用于您正在使用的任何库):