Me encontré con un problema bastante peculiar en mi aplicación de matraz al intentar inyectar una variable de plantilla dentro de un script Js, realmente no entiendo cuál es el problema, así que aquí va.

Específicamente, estoy tratando de inyectar dos variables: una lista de números y una lista de cadenas (de la misma longitud), para poder trazar los datos en un gráfico chart.js .

El problema es que al inyectar una sola variable (la lista de números), la página muestra el gráfico circular sin errores, pero luego, cuando agrego la segunda variable (la lista de cadenas), la página se queda en blanco.

Aquí está el fragmento de JS:

 <div class='chart'> <canvas id="myChart" width="400" height="400"></canvas> <script type="text/javascript"> var data = {{values}}; var labels = {{labels}}; const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'pie', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ labels: '# of Votes', data: data, backgroundColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255,1)', 'rgba(255, 159, 64, 1)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); </script>

Y matraz:

 @app.route('/test') def test(): screener = Signals() major_news = screener.major_news() distribution = screener.industry_distribution(major_news) return render_template('test.html', labels=[str(key) for key in distribution], values=[distribution[key] for key in distribution])

Tenga en cuenta que ambas variables han sido verificadas y ambas contienen lo que deberían.

En el script JS, la variable de labels no hace nada, pero arroja un error tan pronto como se declara.

Gracias por ayudar.