jqPlot muestra el porcentaje y el valor en el gráfico circular

Estoy usando jqPlot con jqplot.PieRenderer para tratar de mostrar un gráfico circular. En la etiqueta me gustaría mostrar value (percent). La documentación dice que puede pasar dataLabel una serie de tipos de etiquetas (source), sin embargo, poner %d%% (por ciento) y %d (por valor) en la opción dataLabelFormatString terminará mostrando nada.jqPlot muestra el porcentaje y el valor en el gráfico circular

¿Alguna idea aquí?

{ 
    seriesDefaults: { 
     renderer: jQuery.jqplot.PieRenderer, 
     rendererOptions: { 
      showDataLabels: true, 
      dataLabels: ['value', 'percent'], 
      dataLabelFormatString: "%d %d%%", 
      sliceMargin: 4, 
      fill: false 
     } 
    }, 
    legend: { show:true, location: 'e' } 
}

Fuente

2012-07-18 Snuffleupagus

He leído esos documentos un poco diferente. Son las opciones 'valor', 'porcentaje', 'etiqueta' O una matriz de etiquetas. No es una variedad de opciones. Para hacer lo que necesita, necesitará crear sus etiquetas de datos como una verdadera variedad de etiquetas.

Por ejemplo:

data = [ 
    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
    ['Out of home', 16],['Commuting', 7], ['Orientation', 9] 
]; 

var total = 0; 
$(data).map(function(){total += this[1];}) 

myLabels = $.makeArray($(data).map(function(){return this[1] + " " + Math.round(this[1]/total * 100) + "%";}));

Ver ejemplo violín here.

Fuente

2012-07-19 15:07:23 Mark

Muchas gracias! Desearía poder darte más de un representante por esto. – Snuffleupagus

De nada. – Mark

Excelente - También me confundí un poco con los documentos e intenté implementar una variedad de opciones - lo resolvió - Súper gracias. – YonoRan

uso

formatter: function(label, series){ 
         return '<div style="font-size:14pt;text-align:center;padding:2px;color:white;">'+Math.round(series.percent)+"%<br/>" + series.data[0][1] +'</div>'; 
        },

Fuente

2014-03-12 16:37:33

jqPlot muestra el porcentaje y el valor en el gráfico circular

Respuesta

Cuestiones relacionadas