2

Olá. Eu tenho um gráfico highcharts e preciso habilitar legenda com quantidade para que facilitar a visualização na hora de imprimir porque a quantidade só esta aparecendo quando passo o mouse em cima e a quantidade não sai na impressão.

<html> 
<head>
       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"     type="text/javascript"></script>    
    <script src='http://code.highcharts.com/highcharts.js' type='text/javascript'> </script>      
    <script src='http://code.highcharts.com/modules/exporting.js' type='text/javascript'></script>
</head>
        <body>
            <?php
            require 'conecta.php';
            mysql_select_db("asteriskcdrdb", $conLigacoes);           
           $sql = "select distinct case when (dstchannel like '%claro%') then 'Claro' when (dstchannel like '%Tim%') then 'Tim' when (dstchannel like '%Vivo%') then 'Vivo' when (dstchannel like '%Tim%') then 'Tim' when (dstchannel like '%Oi%') then 'Oi' when (dstchannel like '%Nextel%') then 'Nextel' else 'Outras' end as 'Operadora', count(dstchannel) as Quantidade from cdr where (dstchannel regexp 'claro|Tim|vivo|oi|nextel') and calldate between '".$_POST['DataInicial']."' and '".$_POST['DataFinal']."' group by  Operadora";

           $result1 = mysql_query($sql);
           $data1 = array();
           $data2 = array();

           while ($row = mysql_fetch_array($result1)) {
               $data1 = $row['Operadora'];
               $data2 = $row['Quantidade'];
               $DadosGrafico[] = "['".$data1."',".$data2."]";
           } 
    ?>
            <script type="text/javascript">
    $(function () {
        $('#container').highcharts({
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
            title: {
                text: 'Relatório de Ligações'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['<?php echo join("','", $data1) ?>'],}, 
            yAxis: {
                min: 0,
                title: {
                    text: 'Quantidade'
                }
            },
            legend: {
                        layout: 'vertical',
                        backgroundColor: '#FFFFFF',
                        align: 'left',
                        verticalAlign: 'top',
                        x: 50,
                        y: 35,
                        floating: true,
                        shadow: true
                    }, 
            plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 }}, 
            series: [{ name: 'Quantidade', data: [<?php echo join(',',$DadosGrafico ) ?>],
                           // pointStart: 0
                            //pointInterval
                        }
    //                    
                        ]
        });
    });
    </script> 

    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
3
  • 3
    Vc pode postar como vc está construindo o gráfico? Sem saber como vc estruturou seu código, fica difícil prestar ajuda.
    – bupereira
    Commented 13/08/2014 às 18:57
  • Peço desculpas, mas ontem eu fiquei sei acesso em algumas páginas por um problema interno da empresa, então. eu acabei não postando o código. Commented 14/08/2014 às 13:37
  • @fabricio_wm jsfiddle.net/3ea7tbou segue o link do fiddle do meu exemplo. Commented 14/08/2014 às 23:35

2 Respostas 2

2

Primeiramente não, não é o plotOptions que está imprimindo o conteúdo do seu gráfico, é o parâmetro "series:" que está fazendo isso.

Segundo ponto, seu código está uma bagunça, se você tivesse separado e indentado direitinho ficaria claro que o plotOptions e o series são coisas distintas.

Terceiro, no jsFiddle você precisa separar JS, html e não adianta colocar PHP. Acredito que você usou ele apenas para nos mostrar seu código, mas fica a dica que se você quiser mostrar um exemplo funcional você precisa separar essas coisas.

Por fim, eis o exemplo que eu acredito que você esteja procurando: http://jsfiddle.net/L601eqcp/3/ Tentei manter ao máximo o seu código original.

1) se quiser adicionar as quantidades nos labels do gráfico você acrescenta o seguinte trecho dentro de plotOptions:

series: {
    dataLabels: {
        enabled: true,
            format: '{point.name}: {point.y:.1f}%'
    }
},

2)se quiser as quantidades na própria legenda, você precisa adicionar a seguinte linha dentro de legend:

labelFormat: '{name} ({percentage:.1f}%)', 

A saber, o número antes de f é o número de decimais que você deseja exibir.

Espero ter ajudado.

0

consegui, o detalhe está em "plotOptions" com o parâmetro "dataLabels".

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Chart reflow is set to true'
        },

        subtitle: {
            text: 'When resizing the window or the frame, the chart should resize'
        },
        // aqui está a solução, dataLabels 'enabled true'
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                }
            }
        },


        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

tirei da própria documentação.

http://www.highcharts.com/demo/bar-basic

EDIT

'plotOptions': { 
    pie: {
        dataLabels: {
            enabled: true
        }
    },
    column: { 
        pointPadding: 0.2, borderWidth: 0 
    }
}
7
  • Não funcionou. Não sei se é porque o gráfico é do tipo pizza e deve possuir diferença nos parâmetros. Dá só uma olhadinha no meu código na integra. jsfiddle.net/L601eqcp/1 Commented 15/08/2014 às 13:08
  • @fabricio_wm então usa "pie" no dict "plotOptions", ficando assim..plotOptions: { pie: { dataLabels: { enabled: true } } } Commented 15/08/2014 às 15:18
  • Não está funcionando. Já existe um plotOptions. Onde deve ficar essa linha? Antes ou depois do yAxis? Obrigado. Commented 15/08/2014 às 16:11
  • deixa ele assim plotOptions: { pie: { dataLabels: { enabled: true } } } Commented 15/08/2014 às 17:23
  • Como assim? É para substituir ? Não posso substituir porque é o plotOptions que imprime o conteudo do meu gráfico. <br /> 'plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 }}, series: [{ name: 'Quantidade', data: [<?php echo join(',',$DadosGrafico ) ?>], showInLegend: true }] }); }); </script> ' Commented 15/08/2014 às 17:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .