如何通过Rails传递集合中的日期并在Chart.js中格式化它们

Question

[我有一个table of integer values and dates显示了田纳西州Nasvhille的Covid-19案例，我试图每天将每个案例绘制为折线图，在Rails中以Chart.js表示。我宁愿不必使用Chartkick gem，而直接将值直接传递给Chart.js，但是在格式化日期时遇到了麻烦。 Chart.js正在绘制整数值，但是现在我的Chart.js代码只是在x轴上显示日期的随机年份。这是当前图表的外观：

如何将每个整数值的日期传递给Chart.js并像“ 2020年3月28日”那样设置其格式？

这是我的代码不起作用（_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(", ") %>

我只是试图将Chart.js所需的所有JavaScript直接嵌入视图中，以使初始版本正常工作。

您可以看到all the code for the app here。

Answer 1

我不知道这是否是一个好的代码，但是您可以将数据放在页面上的某个位置，然后在创建图表时检索它们。

<canvas id="myChart" width="400" height="400"></canvas>
<span id="chart_label" style="display: none;"><%= @county.updates.map {|update| update.date}.join(",") %></span>
<span id="chart_data" style="display: none;"<%= @county.updates.map {|update| update.total_cases}.join(",") %></span>

<script>
  var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: JSON.parse($("#chart_label").text()),
    datasets: [{
      label: "Total Cases",
      data: JSON.parse($("#chart_data").text()),
      backgroundColor: [
      ...