Как интегрировать Google Charts в шаблон HTML? - PullRequest
Новая
       31

Как интегрировать Google Charts в шаблон HTML?

0 голосов
/ 24 марта 2020

У меня есть Django Шаблон с таблицей - результат итерации. Я пытаюсь интегрировать Google Charts в свою страницу HTML для каждой записи, например. Google P ie Chart. https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery/piechart.html Это работает, но диаграмма Google появляется только один раз, независимо от количества итераций в al oop. И оно появляется в том же месте

This is a Google Chart function draw() This is my template file My result

  • Is Есть ли способ отобразить различные диаграммы для каждой строки в al oop, используя Google Charts?
  • Является ли Google Charts правильным решением для такой задачи? Какой простой пакет визуализации может быть решением.
  • Спасибо.

1 Ответ

0 голосов
/ 24 марта 2020

Только что получил. Значения в функции должны изменяться на каждой итерации result

Это шаблон, который отвечает за построение графиков. 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load Charts and the corechart and barchart packages.
      google.charts.load('current', {'packages':['corechart']});

      google.charts.setOnLoadCallback(drawChart_Absatz);

      function drawChart_Absatz() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['2016', {{c.abs_2016__sum}}],
          ['2017', {{c.abs_2017__sum}}],
          ['2018', {{c.abs_2018__sum}}],
          ['2019', {{c.abs_2019__sum}}],
        ]);

        var barchart_options = {title:'Absatz, Stueck',
                       width:300,
                       height:200,
                       colors: ['#A52A2A', '#A52A2A', '#A52A2A', '#A52A2A'],
                       legend: 'none'};
        var barchart = new google.visualization.BarChart(document.getElementById('a{{c.tmp_code}}'));
        barchart.draw(data, barchart_options);
      }

</script>
<body>
    <!--Table and divs that hold the pie charts-->
    <table class="columns">
      <tr>
        <td><div id="b{{a.tmp_code}}" style="border: 1px solid #ccc"></div></td>
      </tr>
    </table>
  </body>
</html>

Обратите внимание, что функция должна быть переименована для каждой итерации. Это недавно сгенерированное имя функции draw (): a {{c .tmp_code}}. Я добавляю букву «а» перед именем функции, потому что в моей таблице три столбца. Функция draw () для второго столбца получает «b», а третий - «c».

А вот шаблон, который печатает таблицу со встроенными диаграммами после каждой строки. На самом деле у меня есть 3 графика после каждой строки, потому что у меня есть три столбца данных. 

<div class="table-responsive-sm">
<table class="table table-sm" >
<thead>
  <tr class="bg-primary text-white">
    <th>Code</th>
    <th>Bezeichnung</th>
    <th class="bg-dark text-right scope="col">Abs.16</th>
    <th class="bg-dark text-right scope="col">Abs.17</th>
    <th class="bg-dark text-right scope="col">Abs.18</th>
    <th class="bg-dark text-right scope="col">Abs.19</th>

    <th class="text-right scope="col">N.erl.16</th>
    <th class="text-right scope="col">N.erl.17</th>
    <th class="text-right scope="col">N.erl.18</th>
    <th class="text-right scope="col">N.erl.19</th>

    <th class="bg-dark text-right scope="col">DB2 16</th>
    <th class="bg-dark text-right scope="col">DB2 17</th>
    <th class="bg-dark text-right scope="col">DB2 18</th>
    <th class="bg-dark text-right scope="col">DB2 19</th>

  </tr>
</thead>


  {% for c in qset %}

    <tr class="bg-light">
          <td>{{c.tmp_code}}</td>
          <td><a href="./{{c.tmp_code}}">{{c.tmp_descr}}</a></td>
          <td class="bg-secondary text-white text-right">{{c.abs_2016__sum}}</td>
          <td class="bg-secondary text-white text-right">{{c.abs_2017__sum}}</td>
          <td class="bg-secondary text-white text-right">{{c.abs_2018__sum}}</td>
          <td class="bg-secondary text-white text-right">{{c.abs_2019__sum}}</td>

          <td class="text-right">{{c.nerl_2016__sum|floatformat}}</td>
          <td class="text-right">{{c.nerl_2017__sum|floatformat}}</td>
          <td class="text-right">{{c.nerl_2018__sum|floatformat}}</td>
          <td class="text-right">{{c.nerl_2019__sum|floatformat}}</td>

          <td class="bg-secondary text-white text-right">{{c.db2_2016__sum|floatformat}}</td>
          <td class="bg-secondary text-white text-right">{{c.db2_2017__sum|floatformat}}</td>
          <td class="bg-secondary text-white text-right">{{c.db2_2018__sum|floatformat}}</td>
          <td class="bg-secondary text-white text-right">{{c.db2_2019__sum|floatformat}}</td>

    </tr>

   {% block pic1 %}
      {% include 'auswertung/chart1.html'  %}
   {% endblock  %}


  {% endfor %}


  <tr class="bg-primary text-white">
        <td class="text-white"></td>
        <td class="text-white">TOTAL:</td>
        <td class="bg-dark text-right">{{gqset.abs_2016__gsum}}</td>
        <td class="bg-dark text-right">{{gqset.abs_2017__gsum}}</td>
        <td class="bg-dark text-right">{{gqset.abs_2018__gsum}}</td>
        <td class="bg-dark text-right">{{gqset.abs_2019__gsum}}</td>

        <td class="text-right text-white">{{gqset.nerl_2016__gsum|floatformat}}</td>
        <td class="text-right text-white"">{{gqset.nerl_2017__gsum|floatformat}}</td>
        <td class="text-right text-white"">{{gqset.nerl_2018__gsum|floatformat}}</td>
        <td class="text-right text-white"">{{gqset.nerl_2019__gsum|floatformat}}</td>

        <td class="bg-dark text-right">{{gqset.db2_2016__gsum|floatformat}}</td>
        <td class="bg-dark text-right">{{gqset.db2_2017__gsum|floatformat}}</td>
        <td class="bg-dark text-right">{{gqset.db2_2018__gsum|floatformat}}</td>
        <td class="bg-dark text-right">{{gqset.db2_2019__gsum|floatformat}}</td>
    </tr>

    {% block pic2 %}
       {% include 'auswertung/chart1.html'  %}
    {% endblock  %}

</table>
</div>
...