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

但是我遇到意外的语法错误＆＃34;（＆＃34;或＆＃34; {＆＃34;等等。

我也试过了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;
}

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

2 个答案: