gpt4 book ai didi

javascript - 修复用于实时图表的 google charts api 的 JSON 数据格式

转载 作者:行者123 更新时间:2023-11-30 20:41:27 25 4
gpt4 key购买 nike

我在我网站的页面上使用 Flask 和谷歌图表。我有一个页面显示数据库的最后一行,它是 json 对象格式:

{"temperature": 11.0, "datetime": "12-12-12 23-23-23"}

在 flask 中,我正在制作这个 getjson 页面,如下所示:

@app.route('/getjson')
def getjson():
tempdata = getTemperatureData()
return render_template('getjson.html', **locals())

这会将局部变量 tempdata 传递给它。在此之后,我用以下简单代码制作了一个 html 文件 (getjson.html):

{{tempdata}}

当我加载网页并检查检查元素选项卡时,我如何得到这个看起来像 pythonanywhere 或 flask 已经添加了所有这些 html 数据:

<html>
#shadow-root (open)
<head></head>
<body>{"temperature": 11.0, "datetime": "12-12-12 23-23-23"}</body>
</html>

我的问题是我的 google charts 图表无法加载,它似乎在我浏览器的网络预览选项卡中接收到这些数据,它看起来完全是根据我希望它接收的内容修改的(它应该是一个 json对象),但它具有所有这些添加的字符:

{&#34;temperature&#34;: 11.0, &#34;datetime&#34;: &#34;12-12-12 23-23-23&#34;}

我的谷歌图表应该能够实时更新的代码如下:

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px"></div>

<script type="text/javascript">
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date Time');
data.addColumn('number', 'Temperature');
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
var options = {
title: 'Temperature Data',
curveType: 'none',
legend: { position: 'bottom' }
};

drawChart();
setInterval(drawChart, 10000);

function drawChart() {
$.getJSON({
url: 'removed from public view just in case',
type: 'get'
}).done(function (jsonData) {
data.addRows([
[jsonData.datetime, jsonData.temperature]
]);
chart.draw(data, options);
}).fail(function (jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
});
}
},
packages: ['corechart']
});
</script>
</body>
</html>

有人建议按如下方式更改它,将接收到的数据插入一个元素并返回它的值,但这不起作用。

 function decodeEntities(encodedString) {
var textArea = document.createElement('textarea');
textArea.innerHTML = encodedString;
return textArea.value;
}

function drawChart() {
$.getJSON({
url: 'removed ...',
type: 'get'
}).done(function (jsonData) {
jsonData = decodeEntities(jsonData);
data.addRows([
[jsonData.datetime, jsonData.temperature]
]);
chart.draw(data, options);
}).fail(function (jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
});
}

真的在寻找这个问题的有效解决方案,谢谢。

最佳答案

你的 flask 端点不应该返回这个

return render_template('getjson.html', **locals())

这将返回 html。而是做这样的事情:

from flask import jsonify
return jsonify(your_data)

关于javascript - 修复用于实时图表的 google charts api 的 JSON 数据格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49208644/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com