javascript 在浏览器中呈现数据答案

【问题标题】：javascript render data in browserjavascript 在浏览器中呈现数据
【发布时间】：2020-07-09 22:27:57
【问题描述】：

我正在使用一个烧瓶应用程序，试图在前端使用 javascript 呈现图表。后端我像这样发送到前端：

import pandas
from ast import literal_eval

data = literal_eval(df2.to_json(orient='records'))

print(data)

看起来像这样：

[{'Date': '2020-06-29 14:04:21.000000', 'meter_reading': 71.6599960327}, {'Date': '2020-06-29 14:19:26.000000', 'meter_reading': 71.2999954224}, {'Date': '2020-06-29 14:34:30.000000', 'meter_reading': 70.9599914551}, {'Date': '2020-06-29 14:49:35.000000', 'meter_reading': 71.1199951172}, {'Date': '2020-06-29 15:04:39.000000', 'meter_reading': 70.9599914551}, {'Date': '2020-06-29 15:19:44.000000', 'meter_reading': 70.9599914551}, {'Date': '2020-06-29 15:34:48.000000', 'meter_reading': 70.6699981689}, {'Date': '2020-06-29 15:49:53.000000', 'meter_reading': 70.5699920654}]

这是我的完整 html 代码。对不起，这里没有很多智慧，任何提示都有帮助！ Jijna 用于 html 文件的这一部分...从前到后发送要绘制图表的数据。

// Add data
chart.data = [{% for item in data %}
                   "{{item}}",
                  {% endfor %}];

完整的html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>chart data</title>
    <!-- import plugin script -->
    <script src='static/Chart.min.js'></script>
  </head>
  <body>
    <h1>Metering Reading</h1>
    <!-- bar chart canvas element -->
    <canvas id="myChart" width="1200" height="600"></canvas>
    <p id="pointSelected"> </p>


<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{% for item in data %}
                   "{{item |safe}}",
                  {% endfor %}];

// Set input format for the dates
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "meter_reading";
series.dataFields.dateX = "Date";
series.tooltipText = "{meter_reading}"
series.strokeWidth = 2;
series.minBulletDistance = 15;

// Drop-shaped tooltips
series.tooltip.background.cornerRadius = 20;
series.tooltip.background.strokeOpacity = 0;
series.tooltip.pointerOrientation = "vertical";
series.tooltip.label.minWidth = 40;
series.tooltip.label.minHeight = 40;
series.tooltip.label.textAlign = "middle";
series.tooltip.label.textValign = "middle";

// Make bullets grow on hover
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.strokeWidth = 2;
bullet.circle.radius = 4;
bullet.circle.fill = am4core.color("#fff");

var bullethover = bullet.states.create("hover");
bullethover.properties.scale = 1.3;

// Make a panning cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panXY";
chart.cursor.xAxis = dateAxis;
chart.cursor.snapToSeries = series;

// Create vertical scrollbar and place it before the value axis
chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.parent = chart.leftAxesContainer;
chart.scrollbarY.toBack();

// Create a horizontal scrollbar with previe and place it underneath the date axis
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series);
chart.scrollbarX.parent = chart.bottomAxesContainer;

dateAxis.start = 0.79;
dateAxis.keepSelection = true;


}); // end am4core.ready()
</script>

  </body>
</html>

在浏览器中没有错误.. 图表不呈现.. 如何排除 javascript 功能的故障？有关图表数据如何通过的浏览器开发工具 firefox，请参见下面的片段...

编辑，更新了 Jinja 模板更改的浏览器开发工具屏幕截图

【问题讨论】：

标签： javascript flask browser

【解决方案1】：

试试{{item |safe}}

或者只是chart.data = {{data}}？

【讨论】：

不要将模板放在引号中，它将被读取为字符串数组
您好，添加{{item |safe}} 可以让数据以我希望的方式显示在浏览器开发工具中...（在编辑下的这篇文章中添加了屏幕截图）您有什么提示吗对javascript函数进行故障排除以绘制数据？图表仍未呈现...谢谢。
你能帮我写这篇 SO 帖子吗？ stackoverflow.com/questions/63016839/javascript-d3-render-chart