Javascript 如何在RubyonRails中显示条形图的图例？

我正在尝试使用jquery通过画布显示一个简单的条形图。 我的视图中html.erb中的代码如下所示：

<script>
                var Script = function () {

                    var data = {


                        labels: ["<%= @label1%>", "<%= @label2%>","<%= @label3%>","<%= @label4%>", "<%= @label5%>"],

                        datasets: [
                            {
                                label: "My First dataset",
                                fillColor: "rgba(220,220,220,0.5)",
                                strokeColor: "rgba(220,220,220,0.8)",
                                highlightFill: "rgba(220,220,220,0.75)",
                                highlightStroke: "rgba(220,220,220,1)",
                                data: <%= @test_val %>
                            }
                        ]

                    };


                    new Chart(document.getElementById("bar").getContext("2d")).Bar(data);

                }();
            </script>

var脚本=函数（）{
风险值数据={
标签：[“”、“”、“”、“”、“”、“”、“”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2200,0.8）”，
高光填充：“rgba（2200,0.75）”，
强光笔划：“rgba（2201）”，
数据：
}
]
};
新图表（document.getElementById（“bar”）.getContext（“2d”））.bar（数据）；
}();

我使用控制器中的变量导入标签和数据。 我想用这个图表显示一个图例

我尝试了很多东西： “选项”中的图例模板

 legendTemplate:  "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

legendTemplate:“
”

但是，我得到了意外的“（”或“{”等的语法错误

我还尝试了chartjs ror，但是我再次无法显示图例

有人能帮我解决这个问题吗

提前感谢

试试这个：

legendTemplate: <%= %Q{
      <ul class="#{name.toLowerCase()}-legend">
        #{for (var i=0; i < datasets.length; i++)}
          #{if (datasets[i].label)}
            <li>
              <span style="background-color: #{ datasets[i].strokeColor }"> </span>
              #{ datasets[i].label }
            </li>
          #{end}
        #{end}
      </ul>
  } %>

---

将以下代码粘贴到您的

HTML

---

强烈建议您提供代码解释。此外，您的代码片段示例似乎已被破坏。添加这部分代码时，我无法解决语法问题（如果您能提供

legendTemplate

数据的确切外观，那么我可能可以帮助您。另外，您面临的语法问题是什么？

legendTemplate: <%= %Q{
      <ul class="#{name.toLowerCase()}-legend">
        #{datasets.each do |dataset|}
          #{if (dataset.label)}
            <li>
              <span style="background-color: #{ dataset.strokeColor }"> </span>
              #{ dataset.label }
            </li>
          #{end}
        #{end}
      </ul>
  } %>