Chart.JS с использованием переменных node.js - PullRequest
Новая
       11

Chart.JS с использованием переменных node.js

0 голосов
/ 18 сентября 2018

Прежде всего, я хотел бы заранее поблагодарить вас всех за помощь.Ранее в другой теме я спрашивал, как я могу вставить содержимое переменной в диаграмму, созданную chart.js.

Я знаю, что файл "view" (EJS) немного запутан, но я создалцикл «для», чтобы увидеть, получает ли файл массив из базы данных (будучи переданным по маршруту), и это (он печатает 11,10,20) - я сделал это просто для уверенности.

Дело в том, что график строится, но информация (из массива из 3 элементов) не выводится на график.Может быть, я забыл сделать какой-то дополнительный шаг?

Просмотр файла (.ejs): 

<!DOCTYPE html>
<html>
<head>
  <!-- Plotly.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>

<body>
<% if(barras){ %>
  <ul>
    <% for (var i = 0; i < barras.length; i++) { %>
      <li>
        <%= JSON.parse(barras[i].progresso) %>
      </li>
    <%}%>
  </ul>
<% } %>
<canvas id="myChart"></canvas>
  <div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
  <% if(barras){ %>
          var barras = [];
          <% for (var i = 0; i < barras.length; i++){ %>
              barras = barras + <%= JSON.parse(barras[i].progresso)%> + ","  ;     
          <%}%>
  <% } %>
  var progresso = barras.substring(barras, barras.length -1);
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'horizontalBar',

    // The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: progresso.parse,
        }]
    },

    // Configuration options go here
    options: {}
});
  </script>
</body>
</html>

Маршрут: 

app.get('/barras', function(req,res){
    console.log('Database connection online');
    connection.query('select progresso,nome from barra', function(error,result){
        barras = result;
        console.log(barras);
        res.render('admin/barras',barras);
    });
});

Я все еще сумасшедшийЧто касается объема работы, чтобы просто сделать график работы.Я также попробовал с платформой Plotly, и она также не захватывает значения из массива.

Кстати, возвращение из базы данных - это RowDataPacket ...

...