Как передать даты из коллекции в рельсы и отформатировать их в диаграмме. js - PullRequest
Новая
       19

Как передать даты из коллекции в рельсы и отформатировать их в диаграмме. js

0 голосов
/ 11 апреля 2020

У меня есть таблица целочисленных значений и дат , показывающая случаи Covid-19 в Nasvhille, TN, и я пытаюсь построить каждый случай в день в виде линейного графика с Chart. js в рельсах. Я бы предпочел не использовать гем Chartkick , а вместо этого просто передать значение непосредственно в Chart. js, но у меня возникают проблемы с форматированием дат. Диаграмма. js строит целочисленные значения, но сейчас мой код диаграммы. js просто отображает случайные годы на оси х для даты. Вот как выглядит график на данный момент:

Screenshot of the incorrect chart

Как передать дату для каждого целочисленного значения в диаграмму. js и отформатировать ее следующим образом " 28 марта 2020 г. "?

Вот мой код, который не работает ( _charts. html .erb ): 

<!-- Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" defer></script>

<canvas id="myChart" width="400" height="400"></canvas>
<script>
window.onload = () => {
  var ctx = document.getElementById('myChart').getContext('2d');

  var myChart = new Chart(ctx, {
      type: 'line',
      data: {
          labels: [
            <%= @county.updates.map {|update| update.date}.join(",") %>
          ],

          datasets: [{
              label: "Total Cases",
              data: [
                <%= @county.updates.map {|update| update.total_cases}.join(",") %>
              ],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          }
      }
  });
}
</script>

<!-- Example of how I'd like the dates to be formatted for reference -->
<%= @county.updates.map {|update| update.date.strftime("%b %e")}.join(", ") %>

Я просто пытаюсь просто вставьте все javascript, необходимые для диаграммы. js непосредственно в представление, чтобы получить начальную версию работающей.

Вы можете увидеть весь код приложения здесь .

...