Legenda nos Gráficos

TOTVS Fluig Páginas (WCM)
, , ,
1

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.

2

Cara, tentei realizar e não consegui

3

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.