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

How to show a legend for a bar chart in Ruby on Rails?

本文关键字：条形图 显示 Rails Ruby on      更新时间：2023-09-26

我试图通过使用jquery的画布显示一个简单的条形图。我的代码在html。我的观点是:

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

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

我尝试了很多东西:options

中的图例模板
 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，但是我仍然无法显示图例。

谁能帮我解决这个问题?

Thanks in advance

将以下代码粘贴到您的

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

试试这个:

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>
  } %>
相关文章：