Javascript 使用Chart.js/Rails中数据库中的数据

我想在我的Rails应用程序（减肥应用程序）的“权重”索引页面上显示一个带有chart.js的折线图。我有一张桌子，上面放着用户每天的体重（千克）。然而，我能够显示折线图，但只能使用静态数据，而不能使用权重表中的数据

我现在想做的是，在x轴上有“天”，在y轴上有“公斤”

我怎样才能做到这一点？正如我几个月前刚刚开始编写的那样：代码应该是什么样子

非常感谢

这是my weights 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>

var ctx=document.getElementById（“myChart”）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：[“第1天”、“第2天”、“第3天”、“第4天”、“第5天”、“第6天”]，
数据集：[{
标签：“我的体重”，
数据：[82.4,79.6,79.3,78.4,77.5,75.1]，
背景颜色：[
'rgba（0,0,0,0.1）'，
],
边框颜色：[
"rgba(0,0,0.9)",，
],
边框宽度：1
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：错
}
}]
}
}
});

让我永远无法摆脱的主要问题是Chart.js依赖于使用

调用其ToolTiptTemplate，我也在努力让它在Rails上工作，但我发现我不必使用Chart.js所说的Rails模板转义字符。在我的例子中（当值设置为0.1时，需要在标签中显示零），我就是这样做的：

tooltipTemplate: function(context){
  var labelVal = (context.value == '0.1')? '0' : context.value;
  var newLabel = context.label + ': ' + labelVal;
  return newLabel;
}

我感觉到你的痛苦。在rails上以正确的方式设置chart.js花了我几个星期的时间，哈哈，我会帮你的。谢谢你的指导。仍然在努力使用Chart.js，所以我切换到highcharts。不知怎的，这是可行的。：-）
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>

tooltipTemplate: function(context){
  var labelVal = (context.value == '0.1')? '0' : context.value;
  var newLabel = context.label + ': ' + labelVal;
  return newLabel;
}