我试图通过使用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，但是再次无法显示图例。
谁能帮我解决这个问题？
提前致谢
将以下代码粘贴到您的代码中
的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;
}本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句