как не повторять цикл forEach на шаблоне, но получать необходимые данные при создании диаграммы с chart.js - PullRequest
Новая
       9

как не повторять цикл forEach на шаблоне, но получать необходимые данные при создании диаграммы с chart.js

0 голосов
/ 09 января 2019

как не повторить цикл forEach для шаблона, но получить необходимые данные при создании диаграммы с chart.js?

Я делаю диаграмму с помощью chart.js. Требуемые данные поступают из БД.

Я получаю правильные данные, просто повторяю, как 7 раз цикл forEach. Как я могу не повторять цикл столько раз?

код такой: 

var resultsChart = document.getElementById("lineChart"); 
var lineChart = new Chart(resultsChart,{ 
        type: "line",
        data:  {
            labels: [
                <% skater.competitions.forEach(function(competition){ %>
                 " <%= competition.name %>" , 
                <% }); %>
            ],
            datasets: [{ 
                data: [
                     <% skater.competitions.forEach(function(competition){ %>
                  <%= competition.skillrace %> , 
                <% }); %>
                    ],
                label: "Skill Race",
                borderColor: "pink",
                fill: false
              }, { 
                data: [
                     <% skater.competitions.forEach(function(competition){ %>
                  <%= competition.dist222m %> , 
                <% }); %>
                    ],
                label: "222m",
                borderColor: "yellow",
                fill: false
              }, { 
                data: [
                     <% skater.competitions.forEach(function(competition){ %>
                  <%= competition.dist333m %> , 
                <% }); %>
                    ],
                label: "333m",
                borderColor: "green",
                fill: false
              }, { 
                data: [
                     <% skater.competitions.forEach(function(competition){ %>
                  <%= competition.dist500m %> , 
                <% }); %>
                    ],
                label: "500m",
                borderColor: "black",
                fill: false
              }, { 
                data: [
                     <% skater.competitions.forEach(function(competition){ %>
                  <%= competition.dist777m %> , 
                <% }); %>
                    ],
                label: "777m",
                borderColor: "orange",
                fill: false
              }, { 
                data: [
                     <% skater.competitions.forEach(function(competition){ %>
                  <%= competition.dist1000m %> , 
                <% }); %>
                    ],
                label: "1000m",
                borderColor: "blue",
                fill: false
              }, { 
                data: [
                     <% skater.competitions.forEach(function(competition){ %>
                  <%= competition.dist1500m %> , 
                <% }); %>
                    ],
                label: "1500m",
                borderColor: "red",
                fill: false
              }
            ]
          },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: false,
                        stepSize: 10000
                    }
                }]
            },
            title: {
              display: true,
              text: 'Distance Results in Chart (in miliseconds)',
              fontSize: 24,
            },
          }
   });


Chart.defaults.line.spanGaps = true;

если вам нужна дополнительная информация, пожалуйста, дайте мне знать!

...