Chart options - legendTemplate

TOTVS Fluig Páginas (WCM)
, ,
1

Estou utilizando um gráfico em uma widget e gostaria que ele exibisse uma legenda informando a label de cada cor. Vi na documentação que existe o "legendTemplate" e que ele recebe uma string, mas que valores eu posso atribuir a ele? E como fica as legendas com cada um desses valores? Eu não encontrei nada sobre isso.

2

Lucas: Quando você conseguir resolver esta questão, você pode entrar em contato com o Suporte fluig para atualizarem a documentação, por favor? Obrigado!

3

Depois de pesquisar bastante descobri que os charts tem a função generateLegend() que gera um html para legenda. Então para adicionar uma legenda no gráfico basta adicionar uma div separada do gráfico (por exemplo:

e editar o innerHtml dessa div da seguinte forma:

var pieChart = chart.pie(data, {});

$('#id_div_legenda')[0].innerHtml = pieChart.generateLegend();

No caso de precisar de uma legenda customizada, basta antes de atribuir o innerHtml editar o html da legenda gerado pela função generateLegend().

4

Fala lucasm,

Poderia exemplificar melhor, não possivel realizar

5

Fala Lucas,

Não deu certo aqui cara, montei a div no view e chamei ela, mas não deu, sabe me dizer pq?

var grafico5 = SuperWidget.extend({ //variáveis da widget variavelNumerica: null, variavelCaracter: null,

//método iniciado quando a widget é carregada init: function() { var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], 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: [65, 59, 80, 81, 56, 55, 40] }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.5)", strokeColor: "rgba(151,187,205,0.8)", highlightFill: "rgba(151,187,205,0.75)", highlightStroke: "rgba(151,187,205,1)", data: [28, 48, 40, 19, 86, 27, 90] } ] };

var chart = FLUIGC.chart('#MY_SELECTOR5', { id: 'fattri', width: '700', height: '200', / See the list of options / }); // call the bar function var barChart = chart.bar(data, ""); var barChart = chart.bar(data, {}); $('#id_div_legenda')[0].innerHtml = barChart.generateLegend();

},

//BIND de eventos bindings: { local: { 'execute': ['click_executeAction'] }, global: {} },

executeAction: function(htmlElement, event) { }

});

6

Para quem interessar, como adicionar uma legenda no FLUIGC.chart

. 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.