如何为chart.js（chartjs.org）中的所有图表types添加标签/图例？
chart.js的文档中提到了“图例模板”，但没有提供这样的图例资源或例子。 这些如何显示？
您可以在图表选项中包含图例模板：
//legendTemplate takes a template as a string, you can populate the template with values from your dataset var options = { legendTemplate : '<ul>' +'<% for (var i=0; i<datasets.length; i++) { %>' +'<li>' +'<span style=\"background-color:<%=datasets[i].lineColor%>\"></span>' +'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>' +'</li>' +'<% } %>' +'</ul>' } //don't forget to pass options in when creating new Chart var lineChart = new Chart(element).Line(data, options); //then you just need to generate the legend var legend = lineChart.generateLegend(); //and append it to your page somewhere $('#chart').append(legend); 你还需要添加一些基本的CSS来让它看起来不错。
-
图例是ChartJs库的默认选项的一部分。 所以你不需要明确地添加它作为一个选项。
-
该库生成HTML。 这只是一个添加到您的网页的问题。 例如，将其添加到给定DIV的innerHTML中。 （如果您正在编辑颜色等，编辑默认选项）
<div> <canvas id="chartDiv" height="400" width="600"></canvas> <div id="legendDiv"></div> </div> <script> var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "The Flash's Speed", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [65, 59, 80, 81, 56, 55, 40] }, { label: "Superman's Speed", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [28, 48, 40, 19, 86, 27, 90] } ] }; var myLineChart = new Chart(document.getElementById("chartDiv").getContext("2d")).Line(data); document.getElementById("legendDiv").innerHTML = myLineChart.generateLegend(); </script>
奇怪的是，我没有发现关于Chart.js文档中的传说和标签的信息。 看起来你不能单独使用chart.js。
对于折线图，我使用以下代码。
首先创build自定义样式
.boxx{ position: relative; width: 20px; height: 20px; border-radius: 3px; }
然后将其添加到您的线路选项
var lineOptions = { legendTemplate : '<table>' +'<% for (var i=0; i<datasets.length; i++) { %>' +'<tr><td><div class=\"boxx\" style=\"background-color:<%=datasets[i].fillColor %>\"></div></td>' +'<% if (datasets[i].label) { %><td><%= datasets[i].label %></td><% } %></tr><tr height="5"></tr>' +'<% } %>' +'</table>', multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>" var ctx = document.getElementById("lineChart").getContext("2d"); var myNewChart = new Chart(ctx).Line(lineData, lineOptions); document.getElementById('legendDiv').innerHTML = myNewChart.generateLegend();
不要忘记添加
<div id="legendDiv"></div>
在你的HTML你想放置你的传奇。 而已！
我知道这个问题很老。 但是这对于那些有传奇故事的人来说可能是有用的。 除了ZaneDarken给出的答案之外，我修改了chart.js文件以在我的饼图中显示图例。 我在这些行的上方更改了legendTemplate（对于每种图表types都声明了很多次）：
Chart.Type.extend({ //Passing in a name registers this chart in the Chart namespace name: "Doughnut", //Providing a defaults will also register the deafults in the chart namespace defaults: defaultConfig, .......
