chart.js (chartjs.org)의 모든 차트 유형에 레이블 / 범례를 추가하려면 어떻게해야합니까?
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만으로는 할 수없는 것 같습니다.
I used https://github.com/bebraw/Chart.js.legend which is extremely light, to generate the legends.
For line chart, I use the following codes.
First create custom style
.boxx{
position: relative;
width: 20px;
height: 20px;
border-radius: 3px;
}
Then add this on your line options
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();
Don't forget to add
<div id="legendDiv"></div>
on your html where do you want to place your legend. That's it!
I know this question is old. But this might be useful for someone who is having the problem with legend. In addition to the answer given by ZaneDarken, I modified the chart.js file to show the legend in my pie chart. I changed the legendTemplate(which is declared many times for every chart type) just above these lines :
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,
.......
My legendTemplate is changed from
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>"
To
legendTemplate: "
<ul class=\ "<%=name.toLowerCase()%>-legend\">
<% for (var i=0; i<segments.length; i++){%>
<li><span style=\ "-moz-border-radius:7px 7px 7px 7px; border-radius:7px 7px 7px 7px; margin-right:10px;width:15px;height:15px;display:inline-block;background-color:<%=segments[i].fillColor%>\"> </span>
<%if(segments[i].label){%>
<%=s egments[i].label%>
<%}%>
</li>
<%}%>
</ul>"
'IT Share you' 카테고리의 다른 글
인증 된 CORS 요청의 프리 플라이트 OPTIONS 요청이 Chrome에서는 작동하지만 Firefox에서는 작동하지 않는 이유는 무엇입니까? (0) | 2020.12.07 |
---|---|
문자열을 JSON 객체 PHP로 변환 (0) | 2020.12.07 |
여러 in 연산자를 사용하는 crudrepository findBy 메서드 서명? (0) | 2020.12.07 |
C ++ 컴파일러가 더 나은 상수 폴딩을 수행하지 않는 이유는 무엇입니까? (0) | 2020.12.07 |
CSS 스타일 "float"를 지우는 가장 좋은 방법은 무엇입니까? (0) | 2020.12.07 |