如何在Ruby on Rails中显示条形图的图例？

Question

我试图通过使用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>

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

我尝试了很多事情：选项中的图例模板

 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>"

但是我遇到意想不到的“（”或“ {”等语法错误。

我也尝试过chartjs-ror，但是再次无法显示图例。

谁能帮我解决这个问题？

提前致谢

Answer 1

尝试这个：

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>
  } %>

甚至可以更好地使用以下each ：

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>
  } %>

Answer 2

将以下代码粘贴到您的代码中

的HTML

 <div id="js-legend" class="chart-legend"></div> 

JS

  document.getElementById('js-legend').innerHTML = myChart.generateLegend(); 

 CSS .chart-legend li span{ display: inline-block; width: 12px; height: 12px; margin-right: 5px; }