Ir para o conteúdo
pedropcruz

[Dúvida] Pie - HighCharts

Mensagens Recomendadas

pedropcruz

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)

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

Editado por apocsantos
geshi

www.pedropcruz.pt - Website Pessoal

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

no que toca a ter "bolinhas" em vez de quadrados, não sei onde fiste sacar a opção "marker", pois ess não existe em lado nenhum da documentação.

o que podes fazer é "simular" um circulo ao ter as bordas redondas do quadrado "suficientemente grandes"

legend: {
// ...
 symbolRadius:8,
 symbolHeight: 16,
 symbolWidth: 16,
// ...
}

o ponto de "agrupar" elementos da legenda, não sei, só vendo a documentação mais aprofundadamente


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
pedropcruz

no que toca a ter "bolinhas" em vez de quadrados, não sei onde fiste sacar a opção "marker", pois ess não existe em lado nenhum da documentação.

o que podes fazer é "simular" um circulo ao ter as bordas redondas do quadrado "suficientemente grandes"

legend: {
// ...
 symbolRadius:8,
 symbolHeight: 16,
 symbolWidth: 16,
// ...
}

o ponto de "agrupar" elementos da legenda, não sei, só vendo a documentação mais aprofundadamente

Sim vi na documentação o marker... Está lá... Até usam triângulos e afins lol.

Obrigado pela ajuda das "bolinhas" eheh

Tou a pensar é que lógica poderei ter para agrupar as legendas...

EDIT:

http://jsfiddle.net/pedropcruz/0hv2cjjz/4/

Abraço

Editado por pedropcruz

www.pedropcruz.pt - Website Pessoal

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.