javascript - 在 Chart.js/Rails 中使用数据库中的数据

Question

我想在我的 Rails 应用程序(减肥应用程序)中使用 Chart.js 在我的“权重”索引页面上显示折线图。我有一个表格，其中包含用户每天(作为“天”)的体重(作为“千克”)。然而，我能够显示折线图，但只能使用静态数据——不能使用我的权重表中的数据。

我现在要做的是在 x 轴上显示“天”，在 y 轴上显示“千克”。

我怎样才能做到这一点？几个月前我才开始编码:代码应该是什么样子的？

非常感谢。

这是我的权重 index.html.erb 中的代码:

<canvas id="myChart" width="400" height="200"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["day 1", "day 2", "day 3", "day 4", "day 5", "day 6"],
        datasets: [{
            label: 'My Weight',
            data: [82.4, 79.6, 79.3, 78.4, 77.5, 75.1],
            backgroundColor: [
                'rgba(0, 0, 0, 0.1)',
            ],
            borderColor: [
                'rgba(0,0,0,0.9)',
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:false
                }
            }]
        }
    }
});
</script>

Answer 1

让我永远陷入困境的主要事情是 Chart.js 依赖于使用 <% 调用其工具提示模板。然而，这将被 ERB 解释并导致问题。解决方法是添加另一个 %这告诉 erb 不要解释它本来会有的标签。这不是很好的记录，但你打算做什么。至于其余的，在您的 view-page.html.erb 文件中，您要在底部添加图表脚本:

设置时间线 X 轴(我将向您展示如何动态加载它，但如果您愿意，也可以是静态的，在这种情况下，只需将它们直接输入到时间线数组中):

<script type="text/javascript">
$(function() {
      var lineData = {
      <% timeline = []
         datapoints = []
        @workout.each do |workout|
          timeline << workout.day
          datapoints << workout.weight
       end
 %>
       //The "raw" method is needed to stop the auto escaping of the output.  Test this out in your console and you will notice the output is formatted like "[\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\"]"  This escaping of quotes causes errors in js...
      labels: <%= raw timeline.to_json %>,
        datasets: [{
                label: "Weight Gain/Loss",
                fillColor: "rgba(26,179,148,0.5)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#127A65",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: <%= raw datapoints.to_json %>,
            }]
    };

如果你想设置一些选项记得使用<%%工具提示标签!

var lineOptions = {
            scaleOverride : true,
            tooltipTemplate: "<%%if (label){%>(<%%=label%>) <%%}%><%%= value %>  pounds",
    };
    //NOTE THE ABOVE TOOLTIP REQUIRES A SECOND % SIGN ON OPENING TAGS SO THAT IS IS TAKEN LITERALLY AND NOT INTERPRETED BY RAILS ERB!!!!!!!!

var ctx = document.getElementById("myChart").getContext("2d");

var myNewChart = new Chart(ctx).Line(lineData, lineOptions);

});
</script>