Как импортировать файл js с flask? (python) - PullRequest
Новая
       0

Как импортировать файл js с flask? (python)

0 голосов
/ 09 июля 2020

Я хотел бы использовать диаграмму Google с flask. Если я перенесу код js в файл html, он будет работать нормально. Однако отделение кода js от файла html не работает. Диаграмма не отображается.

[main.html] 

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="{{ url_for('static',filename='js/g_chart.js')}}"></script>
...
<div id="curve_chart2" style="position:absolute; top:100px;width: 400px; height: 400px"></div>
<div id="curve_chart" style="position:absolute; top:300px;width: 800px; height: 100px"></div>

[g_chart.js] 

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Year', 'A', 'B'],
  ['2004',  1000,      400],
  ['2005',  1170,      460],
  ['2006',  660,       1120],
  ['2007',  1030,      540]
]);

var options = {
  title: 'Company Performance',
  curveType: 'function',
  legend: { position: 'bottom' },
  backgroundColor: { fill: "#000000"},
  fontSize:12,
  fontColor:"#FFFFFF",
  titlePosition: 'in',
  hAxis: {
        color: '#FFFFFF',
    }
};

var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
var chart2 = new google.visualization.ScatterChart(document.getElementById('curve_chart2'));
chart.draw(data, options);
chart2.draw(data, options);
}

Есть ли решение?

1 Ответ

0 голосов
/ 09 июля 2020

Код разделен на js, хорошо. Но его все равно нужно запустить.

  1. сделать код для построения диаграммы функции
  2. в html скрипт добавить прослушиватель событий для вызова функции в 1

gchart. js

function buildchart() {
    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);
}

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'A', 'B'],
        ['2004', 1000, 400],
        ['2005', 1170, 460],
        ['2006', 660, 1120],
        ['2007', 1030, 540]
    ]);

    var options = {
        title: 'Company Performance',
        curveType: 'function',
        legend: { position: 'bottom' },
        backgroundColor: { fill: "#000000" },
        fontSize: 12,
        fontColor: "#FFFFFF",
        titlePosition: 'in',
        hAxis: {
            color: '#FFFFFF',
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
    var chart2 = new google.visualization.ScatterChart(document.getElementById('curve_chart2'));
    chart.draw(data, options);
    chart2.draw(data, options);
}

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GChart</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="/static/js/gchart.js"></script>

</head>

<body>
    <main>
        <section>
            <h1>Hello</h1>
            <div id="curve_chart2" style="position:absolute; top:100px;width: 400px; height: 400px"></div>
            <div id="curve_chart" style="position:absolute; top:300px;width: 800px; height: 100px"></div>
        </section>
    </main>
    <script>
        document.addEventListener("load", buildchart());
    </script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...