Quantcast
Channel: Tópicos
Viewing all articles
Browse latest Browse all 14700

[Dúvida] Pie - HighCharts

$
0
0
Saudações,

Tenho umas dúvidas quando ao Highcharts, então começo por mostrar o meu Highchart:

http://prntscr.com/74fc32

Para explicar um pouco melhor, fiz 2 pie charts, com 2 séries diferentes.

No meu código abaixo, umas coisas não fazem simplesmente sentido (pois, tentei mudar o marker, mas até agora sem efeito e isso é uma das minhas dúvidas e também por uma legenda agrupada pela sua categoria)

Código :
var categories = ['Product', 'Competition'],
                            data = {
                                    Product: {
                                            name: 'Product',
                                            size:'100%',
                                            innerSize: '85%',
                                            data: [{ name: "Product", y: 851.8, color: colors[1], category: 'TV', marker: { symbol: 'circle' } },
                                                           { name: "Product", y: 554.2, color: colors[2], category: 'Radio', marker: { symbol: 'circle' } },
                                                           { name: "Product", y: 487.6, color: colors[3], category: 'Press', marker: { symbol: 'circle' } },
                                                           { name: "Product", y: 375.3, color: colors[4], category: 'Outdoor', marker: { symbol: 'circle' } },
                                                           { name: "Product", y: 298, color: colors[5], category: 'Cinema', marker: { symbol: 'circle' } },
                                                           { name: "Product", y: 653.2, color: colors[6], category: 'Internet', marker: { symbol: 'circle' } }],
                                            dataLabels: { enabled: false },
                                            marker: { symbol: 'circle' }
                                    },
                                    Competition: {
                                            name: 'Competition',
                                            size:'75%',
                                            innerSize: '90%',
                                            data: [{ name: "Competition", y: 710.2, color: colors[1], category: 'TV', marker: { symbol: 'circle' } },
                                                           { name: "Competition", y: 0, color: colors[2], category: 'Radio', marker: { symbol: 'circle' } },
                                                           { name: "Competition", y: 9.2, color: colors[3], category: 'Press', marker: { symbol: 'circle' } },
                                                           { name: "Competition", y: 0, color: colors[4], category: 'Outdoor', marker: { symbol: 'circle' } },
                                                           { name: "Competition", y: 0, color: colors[5], category: 'Cinema', marker: { symbol: 'circle' } },
                                                           { name: "Competition", y: 0, color: colors[6], category: 'Internet', marker: { symbol: 'circle' } }],
                                            color: [colors[1], colors[2], colors[3], colors[4], colors[5], colors[6]],
                                            dataLabels: { enabled: false },
                                            marker: {symbol:'circle'}
                                    },
                            },
                            ProductData = [],
                            CompetitionData = [],
                            PointFormatToolTipProduct, PointFormatToolTipCompetition;


                    $("#DonuTchartIBV-MMS-1").highcharts({
                            chart: {
                                    type: 'pie'
                            },
                            legend: {
                                    enabled: true,
                                    layout: 'vertical',
                                    align: 'right',
                                    width: 500,
                                    verticalAlign: 'middle',
                                    useHTML: true,
                                    marker:{ symbol: 'circle'},
                                    labelFormatter: function () {
                                            return '<div style="width:200px"><span style="float:left">' + this.category + '</span><span class="number-piechart" style="float:right">' + this.y + 'K</span></div>';
                                    }
                            },
                            tooltip: {
                                    pointFormat: '<span style="color:{point.color}">\u25CF {point.category}: {point.y} K</span><br/>'
                                 
                            },
                            credits: { enabled: false },
                            title: { text: null },
                            plotOptions: {
                                    pie: {
                                            shadow: false,
                                            center: ['50%', '50%'],
                                            borderColor: 'transparent',
                                            cursor: 'pointer',
                                            showInLegend: true,
                                            marker: { symbol: 'circle' }
                                    },
                                    series: {
                                            marker: {
                                                    enabled: true,
                                                    symbol: 'circle'
                                            }
                                    }
                            },
                            series: [
                                    data.Product
                                    ,
                                    data.Competition
                            ]
                    },
                    function(chart) { // on complete
                            var textX = chart.plotLeft + (chart.plotWidth  * 0.5 + 10);
                            var textY = chart.plotTop  + (chart.plotHeight * 0.5);
                            var idNumber = $('.number-piechart');
                            var publish = [];
                            var total = 0;
                            idNumber.each(function (i,e) {
                                    publish.push($(e).text().replace('K', ''));
                                    total += parseFloat(publish);
                            });
                            var result = Number(total).toFixed(2);
                            var span = '<div id="pieChartInfoText" style="position:absolute; text-align:center;">';
                            span += '<span style="font-size: 15px; color:' + colors[1] + '; vertical-align:middle;">\u25CF</span><span style="font-size: 30px; vertical-align:middle; color:'+ colors[1] +'">' + result + 'K</span><br>';
                            span += '<span style="font-size: 7px; color:' + colors[1] + '; vertical-align:middle;">\u25CF</span><span style="font-size: 15px; vertical-align:middle; color:' + colors[1] + '">' + result + 'K</span>';
                            span += '</div>';
                            $("#DonuTchartIBV-MMS-1").append(span);
                            span = $('#pieChartInfoText');
                            span.css('left', textX + (span.width() * -0.5)),
                                            ('color', colors[2]);
                            span.css('top', textY + (span.height() * -0.5 +10)),
                                            ('color', colors[2]);;
                    });
            });

A 1ª questão como disse em cima, na legenda, em vez de quadrados, queria circulos, e se é possível fazer... (Sim já remexi a documentação toda e nada, dai repetir tanto em tanto sitio diferente.)

A 2ª questão é se dá para agroupar por categoria a legenda (ou seja, TV com TV, Radio com Radio, e assim por ai adiante, e mexer com os estilos de cada.)

Viewing all articles
Browse latest Browse all 14700