Bom Dia, montei um Widget para apresentação de um gráfico, no meu caso um gráfico de pizza, porém o mesmo não trás uma legenda para referenciar cada parte.
No Fluig Style Guide, ele informa que tem a opção legendTemplate, mas não existe nenhum exemplo do mesmo.
Alguém que já tenho feito um gráfico com legendas consegue me ajudar ?
Desde já agradeço.
Att,
Allan Santos.
Para quem interessar, como adicionar uma legenda no FLUIGC.chart
* NESTE EXEMPLO, FOI ADICIONADO UMA LEGENDA EM UM GRAFICO COLUNAS
. no CSS
.legend {
padding: 5px 10px;
}
.bar-legend li {
position:relative;
display: inline;
float:unset;
width:120px;
padding-left: 20px
}
.bar-legend span {
display: inline-block;
height: 1em;
width: 1em;
margin-right: .8em;
}. no HTML, adicionar uma div abaixo ou acima da div que ficará o gráfico
<div id="id_legenda" class="legend"></div>. no JS
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'My First dataset',
fillColor: "rgba(55,120,198,0.2)",
strokeColor: "rgba(55,120,198,1)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}, {
label: 'My Second dataset',
fillColor: "rgba(220,20,220,0.2)",
strokeColor: "rgba(220,20,220,1)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
var options = {
scaleBeginAtZero: false,
legendTemplate: <ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>;border: 1px solid <%=datasets[i].strokeColor%>;"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%>: <%=datasets[i].value%></li><%}%></ul>'
};
var chart = FLUIGC.chart('#id_div_grafico', {
id : 'my_example',
width : '700',
height : '300',
});
var barChart = chart.bar(data, options);
var legend = barChart.generateLegend();
document.getElementById('id_legenda').innerHTML = legend;Espero ter ajudado.