Angular-Chartjs Align Legend Center -- javascript campo con angularjs campo con alignment campo con chart.js campo con legend camp Relacionados El problema

Angular-ChartJS align legend right center


4
vote

problema

Español

Estoy usando la envoltura angular-Chartjs para crear un gráfico de donas. Soy capaz de alinear la leyenda en la parte superior derecha usando estas opciones:

  legend: {     display: true,     position: 'right',     fullWidth:true }   

En la imagen izquierda, puede ver cómo está y en la imagen correcta, puede ver cómo debería ser. (La imagen correcta no es totalmente correcta alineada, pero obtienes lo que quiero decir)

ingrese la descripción de la imagen aquí  Enter Descripción de la imagen aquí

¿Hay alguna manera de crear una leyenda personalizada con los datos del gráfico y alinear ese 'centro derecho' de la leyenda 'a la tabla?

Original en ingles

I'm using the Angular-ChartJs wrapper to create a doughnut chart. I'm able to align the legend at the right top using this options:

legend: {     display: true,     position: 'right',     fullWidth:true } 

On the left image you can see how it is and on the right picture you can see how it should be. (the right image is not totally correct aligned but you get what I mean)

enter image description here enter image description here

Is there a way to create a custom legend with the data of the chart and align that legend 'right center' to the chart?

              
       
       

Lista de respuestas

0
 
vote
vote
La mejor respuesta
 

La respuesta es 'Opciones [' legendcallback ']'

  1. Paseo las opciones de la tabla al lienzo usando el atributo elemento 'gráfico-options = "$ ctrl.options"'
  2. Deshabilitar la leyenda en las opciones de la tabla '$ ctrl.options [' leyenda '] [' habilitado '] = falso'
  3. Crea tu propia leyenda usando '$ ctrl.options [' legendcallback ']'

Ejemplo:

  $ctrl.options['legendCallback'] = function(chart) {     const text = []     text.push('<div class="rr-doughnut-chart-legend">')     // use dynamic legend id to handle multiple charts at once on one page     text.push('<ul class="' + chart.id + '-legend">')      // INSERT YOUR CUSTOM LEGEND HERE (perhaps generated automatically with chart object)      text.push('</ul>')     text.push('</div>')      return text.join('') }   
 

The answer is 'options['legendCallback']'

  1. I pass the chart options to the canvas using the element attribute 'chart-options="$ctrl.options"'
  2. disable legend in chart options '$ctrl.options['legend']['enabled'] = false'
  3. create your own legend using '$ctrl.options['legendCallback']'

Example:

$ctrl.options['legendCallback'] = function(chart) {     const text = []     text.push('<div class="rr-doughnut-chart-legend">')     // use dynamic legend id to handle multiple charts at once on one page     text.push('<ul class="' + chart.id + '-legend">')      // INSERT YOUR CUSTOM LEGEND HERE (perhaps generated automatically with chart object)      text.push('</ul>')     text.push('</div>')      return text.join('') } 
 
 

Relacionados problema

1  Suprimir leyenda en la parcela VCD Assoc / solo una leyenda para múltiples parcelas asociadas  ( Suppress legend in vcd assoc plot only one legend for multiple assoc plots ) 
Estoy produciendo varias parcelas de asociación en una parcela con vcd 's assoc() . En lugar de tener una leyenda de color para cada parcela, me gustaría t...

0  Título de la leyenda no se muestra en GGPLOT-MAPS  ( Legend title not displayed in ggplot maps ) 
Tan pronto como agrego un rango dinámico para mis etiquetas de leyenda dentro de la opción Scale_Fill_Distiller, obtengo solo un "1" en lugar del título de la...

9  MATLAB: Asignar varios colores al texto en la leyenda  ( Matlab assign multiple colors to text in legend ) 
Estoy tratando de colorear el texto del código en una leyenda. (Ya que estoy tratando de ordenar varias parcelas en diferentes categorías, no puedo confiar só...

1  ¿Cómo eliminar líneas de leyendas en ggplot?  ( How to remove lines from legends in ggplot ) 
He leído algunas publicaciones sobre esto, pero no encontré la solución adecuada para mi problema. Debido a que la línea discontinua de Geom_Vline es vertical...

2  En Zend Subform, ¿cómo configuro la leyenda escapar a FALSO?  ( In zend subform how do i set legend escape to false ) 
Tengo un subformulario, donde configuro una leyenda. $dob = new Zend_Form_SubForm(); $dob->addElement($birthdayMonth) ->addElement($birthdayDay) ->setLegen...

0  Parcela de dispersión interactiva con leyenda de ColorBar  ( Interactive scatter plot with colorbar legend ) 
Tengo una matriz 3D (3,10). Tengo una parcela de dispersión 2D, donde el color y el tamaño de los marcadores dependen de la 3ª columna. Me atasco en dos cos...

2  ¿Cómo debo vincular la colocación de la leyenda a los valores de los datos en GGPLOT2?  ( How should i link legend placement to values of data in ggplot2 ) 
Me gustaría ajustar automáticamente la colocación vertical de mi leyenda para que la leyenda termine cerca de los datos. Me gustaría que el centro de la leyen...

1  GGPLOT2 La leyenda no tiene lugar en el gráfico?  ( Ggplot2 legend does not take place in graph ) 
Aquí mi código: modele <- ggplot(data = liste_ref, aes(x = BV, y = liste_ref[,p]))+ geom_point(aes(text = paste("Code opération: ",OPE_ID), colour = "F...

1  ¿Cómo pongo anotaciones GGPLOT en mi figura leyenda?  ( How do i put ggplot annotations onto my figure legend ) 
Estoy tratando de poner anotaciones de mi GGPLOT en la leyenda de la figura. Actualmente, mi figura se ve así: Las líneas horizontales que agregué repres...

1  RIPRO DE R: Traer los valores formateados en expresión () en la leyenda gráfica base  ( R plot bringing formatted values into expression in base graphics legend ) 
Siguiendo el problema: Intento hacer una leyenda donde tendré algo como: ɛ = 5 L / (mol cm). Sin embargo, se calcula el número, aquí un ejemplo mínimo: pl...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos