Я создаю веб-сервис, в котором я хочу использовать Google Charts.
У меня есть скрипт, который создает данные в формате, приемлемом для google.visualization.arrayToDataTable, и передает их в строковом формате в переменную google.visualization.arrayToDataTable ({{data}})
Когда у меня есть html-шаблон, и я сам вставляю строку с данными, все отлично отрисовывается, и когда я получаю доступ к исходному коду, я вижу:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([['var1', 'var2', 'var3'], [0.0, 10.0, 12.48], [1.0, 1.0, 5.64], [2.0, 5.0, 3.68], [3.0, 3.0, 3.2], [4.0, 3.0, 3.52], [5.0, 2.0, 2.16], [6.0, 1.0, 1.76], [7.0, 0.0, 1.32], [8.0, 0.0, 1.68], [9.0, 0.0, 0.8], [10.0, 2.0, 0.76], [11.0, 0.0, 0.92], [12.0, 2.0, 0.96], [13.0, 2.0, 1.32], [14.0, 0.0, 1.0799999999999996], [15.0, 0.0, 0.96], [16.0, 0.0, 0.68], [17.0, 1.0, 0.52], [18.0, 0.0, 0.44], [19.0, 1.0, 0.28], [20.0, 0.0, 0.4], [21.0, 0.0, 0.68], [22.0, 1.0, 0.44], [23.0, 0.0, 0.16], [24.0, 0.0, 0.08], [25.0, 1.0, 0.08], [26.0, 0.0, 0.16], [27.0, 1.0, 0.32], [28.0, 0.0, 0.48], [29.0, 0.0, 0.4], [30.0, 0.0, 3.2]]);
var options = {
title: 'perc_diff',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
Однако, когда я вызываю этот веб-сайт с помощью моего приложения Flask с использованием метода render_template, я получаю:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([['var1', 'var2', 'var3'], [0.0, 10.0, 12.48], [1.0, 1.0, 5.64], [2.0, 5.0, 3.68], [3.0, 3.0, 3.2], [4.0, 3.0, 3.52], [5.0, 2.0, 2.16], [6.0, 1.0, 1.76], [7.0, 0.0, 1.32], [8.0, 0.0, 1.68], [9.0, 0.0, 0.8], [10.0, 2.0, 0.76], [11.0, 0.0, 0.92], [12.0, 2.0, 0.96], [13.0, 2.0, 1.32], [14.0, 0.0, 1.0799999999999996], [15.0, 0.0, 0.96], [16.0, 0.0, 0.68], [17.0, 1.0, 0.52], [18.0, 0.0, 0.44], [19.0, 1.0, 0.28], [20.0, 0.0, 0.4], [21.0, 0.0, 0.68], [22.0, 1.0, 0.44], [23.0, 0.0, 0.16], [24.0, 0.0, 0.08], [25.0, 1.0, 0.08], [26.0, 0.0, 0.16], [27.0, 1.0, 0.32], [28.0, 0.0, 0.48], [29.0, 0.0, 0.4], [30.0, 0.0, 3.2]]);
var options = {
title: 'perc_diff',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
И страница не хочет отображать Google-карту. Шаблон:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable({{ data }});
var options = {
title: 'perc_diff',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
где данные передаются в виде строки из приложения Python Flask.
Я полагаю, что причина ошибки заключается в том, что "" "заменяется на" "при рендеринге.
Может ли кто-нибудь быть настолько хорошим, чтобы помочь мне решить эту проблему?