Блог

Главная - Вопросы по программированию - Как построить график(несколько строк) с помощью chartjs и данных, отображаемых в ejs

Как построить график(несколько строк) с помощью chartjs и данных, отображаемых в ejs

#node.js #express #chart.js #ejs

Вопрос:

У меня есть объект json, который я отображаю в шаблоне ejs . мне нужно построить линейный график с помощью chartjs.

 const filepath = csvFilepath;
        console.log(filepath,"csvfilepath")
   
       const jsonarray = await csv().fromFile(filepath);
       console.log(jsonarray,"jasonarray");
       res.render("patientgraph", {data: jsonarray})
       console.log("data rendered")

в своих эякулятах я занимаюсь

 <%= JSON.stringify(data) %>  which gives my data rendered from api. i need to plot a line graph using the elements inside the data. its bit confusing to add labels and data to my charjs script. please help.

мой сценарий js для диаграммы

 <body>
    <div>
        <%= JSON.stringify(data) %>
    </div>
    <% data.forEach(function(o) { %>
        <li><%= o.leftHipAngle %> - <%= o.realTime %></li>
    <% }); %>

  <div class="graph-column">
    <canvas id="myChart" ></canvas>
    <br>
    <canvas id="myChart1" ></canvas>
    <br>
    <canvas id="myChart2" ></canvas>
    <br>
    <canvas id="myChart3" ></canvas>
  </div>
    

      
      <script>
      var ctx = document.getElementById('myChart').getContext('2d');
      
      console.log(mydata)
      var myChart = new Chart(ctx, {
          type: 'line',
          data: {
              labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
              datasets: [{
                  label: '# of Votes',
                  data: [1, 2, 3, 5, 2, 3,12,11.7,56,34,37,1,56,2,32,5,47,99,6,55,63,76],
                  backgroundColor: [
                      'rgba(255, 99, 132, 0.2)',
                      'rgba(54, 162, 235, 0.2)',
                      'rgba(255, 206, 86, 0.2)',
                      'rgba(75, 192, 192, 0.2)',
                      'rgba(153, 102, 255, 0.2)',
                      'rgba(255, 159, 64, 0.2)'
                  ],
                  borderColor: [
                      'rgba(255, 99, 132, 1)',
                      'rgba(54, 162, 235, 1)',
                      'rgba(255, 206, 86, 1)',
                      'rgba(75, 192, 192, 1)',
                      'rgba(153, 102, 255, 1)',
                      'rgba(255, 159, 64, 1)'
                  ],
                  borderWidth: 1
              }]
          },
          options: {
              scales: {
                  y: {
                      beginAtZero: true
                  }
              }
          }
      });
     
     
      </script>

примечание : мои строковые данные (например)

 [ {
    p_id: 'P4',
    session: 'P21',
    leftHipAngle: '23.67407'
    realTime: '703.697'
  },
  ]

я хочу, чтобы моя метка в ключе реального времени и данных была левой. любая помощь будет признательна. я получаю эти данные из csv-файла, который я конвертирую в строку json.

Метки: ,