我正在尝试将Google折线图用作我的flask项目的一部分。但是我不只是想要一个图，而是有一个列表字典，每个列表都需要转换为折线图。但是我对js并没有太多的经验，并且不确定为什么现在页面上什么都没有显示。任何帮助将非常感激
GraphData={
1:[['Col1','Col2'],[Row1,Row1],[Row2,Row2]],
2:[['Col1','Col2'],[Row1,Row1],[Row2,Row2],[Row3,Row3]}
3:[['Col1','Col2','Col3',[Row1,Row1,Row1],[Row2,Row2,Row2]}
#In the <head> area:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
{% for Vars in GraphData %}
<script type="text/javascript">
var Data =GraphData[Vars]
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(Datas}
var options = {
title: 'Graph Data',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById(Vars));
chart.draw(data, options);
}
</script>
{%endfor%}
and in the <body> section:
{% for Vars in GraphData %}
<div id={{Vars}} style="width: 900px; height: 500px"></div>
{% endfor %}
processAllCharts()循环所有数据的函数google.charts.setOnLoadCallback(processAllCharts);drawChartfunction drawAllCharts() { GraphData.forEach(drawChart); }const GraphData = [
[
['Year', 'Foo', 'Bar'],
['2017', 2000, 400],
['2018', 660, 1120],
['2019', 1030, 540],
],
[
['Year', 'Lorem', 'Ipsum'],
['2014', 780, 1400],
['2015', 998, 770],
['2016', 660, 1120],
],
[
['Year', 'Dolor', 'Sit Amet'],
['2017', 660, 1120],
['2018', 1030, 540],
],
];
const EL_gAllCharts = document.querySelector("#gAllCharts");
const chartOptions = {
title: 'Graph Data',
curveType: 'function',
legend: {
position: 'bottom'
}
};
function drawChart(data) {
// Create charts
const EL_gChart = document.createElement("div");
EL_gChart.classList.add("gChart");
gAllCharts.append(EL_gChart);
const gData = google.visualization.arrayToDataTable(data)
const chart = new google.visualization.LineChart(EL_gChart);
chart.draw(gData, chartOptions);
}
function processAllCharts() {
GraphData.forEach(drawChart);
}
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(processAllCharts);.gChart {
height: 260px;
}<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="gAllCharts"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句