如何从一个js创建多个折线图function

Question

I'm trying to use Google line charts as part of a flask project of mine.我正在尝试将Google 折线图用作我的 flask 项目的一部分。 However I don't just want one graph, I have a dictionary of lists, with each of those lists needing to be converted into a line chart.但是我不只是想要一个图表，我有一个列表字典，每个列表都需要转换为折线图。 However I'm very much not experienced with js and am unsure why nothing is showing up on the page at the moment.但是，我对 js 非常缺乏经验，并且不确定为什么目前页面上没有显示任何内容。 Any help would be much appreciated任何帮助将非常感激

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 %}

Answer 1

First of convert your data to JSON and if needed parse it .首先将您的数据转换为 JSON 并在需要时对其进行解析。
Create a function processAllCharts() that loops all your data创建一个循环所有数据的 function processAllCharts()
Call that function as callback: google.charts.setOnLoadCallback(processAllCharts);调用 function 作为回调： google.charts.setOnLoadCallback(processAllCharts);
Inside that loop send every piece of data to drawChart在该循环内将每条数据发送到drawChart
Create dynamically your chart DIVs动态创建图表 DIV

 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>

如何从一个js创建多个折线图function

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-02-14 14:24:50

如何从一个js创建多个折线图function

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-02-14 14:24:50

解决方案1
0 已采纳 2021-02-14 14:24:50