1

A minha dúvida é como alterar as markers do pie do highchart (na legenda) de rectangulos para circulos e como agrupar a minha legenda por category, mostro o código abaixo:

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]);;
                });
        });

Apresento esta screen para visualizarem onde tenho as minhas dúvidas.

EDIT:

Apresento também um fiddle para ajudar a perceber melhor.

1 Resposta 1

2

Para tornar os retangulos em círculos basta adicionar isso no parametro 'legend' [Exemplo]:

symbolWidth: 12,
symbolRadius: 6,

E para agrupar elementos na legenda não há nenhum jeito que eu considere elegante, mas voce pode usar o useHTML como verdadeira e usar o labelFormatter para conseguir um resultado razoável [Exemplo]:

labelFormatter: function () {

        if (this.x == 0) return '<h2>Título grupo 1</h2>' + this.name;
        else if (this.x == 2) return '<div class="segundo"><h2>Título grupo 2</h2>' + this.name + '</div>';
        else return this.name;

    },
1
  • Sim eu depois lá consegui, e esqueci-me de partilhar a solução, mas é exactamente isso :). Obrigado :)
    – n1c0t0p
    Commented 5/06/2015 às 8:13

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 .