Diagrama de donuts Highcharts sin pastel interno?

Question

He estado buscando la solución para generar el gráfico de dona más simple con la biblioteca de Highcharts. Sin embargo, todos los ejemplos de Highcharts muestran el estilo del gráfico con el pie interno y el anillo exterior (consulte: http://www.highcharts.com/demo/pie-donut)

¿Cómo puedo deshacerme del pastel interno y guardar el anillo exterior, como hacen otras bibliotecas? (algo así como RGraph: http://www.rgraph.net/examples/donut.html)

Gracias.

Answer 1

Solo necesita proporcionar los datos como una matriz de dos matrices de elementos (clave/valor). Especifique un innerSize para obtener el estilo de dona.

Así que sus parámetros contendrán algo como esto:

... 
data: [["Firefox",6],["MSIE",4],["Chrome",7]], 
innerSize: '20%', 
... 

Aquí hay una jsFiddle of a complete example.

Answer 2

**I hope this example of highchat will solve your problum 

http://jsfiddle.net/e2qpa/3/ 

$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'pie' 
     }, 

     plotOptions: { 
      pie: { 
       borderColor: '#000000', 
       innerSize: '60%' 
      } 
     }, 
     series: [{ 
      data: [ 
       ['Firefox', 44.2], 
       ['IE7', 26.6], 
       ['IE6', 20], 
       ['Chrome', 3.1], 
       ['Other', 5.4] 
       ]}] 
    }, 
    // using 

    function(chart) { // on complete 

     var xpos = '50%'; 
     var ypos = '53%'; 
     var circleradius = 102; 

    // Render the circle 
    chart.renderer.circle(xpos, ypos, circleradius).attr({ 
     fill: '#ddd', 
    }).add(); 

    // Render the text 
    chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({ 
      width: circleradius*2, 
      color: '#4572A7', 
      fontSize: '16px', 
      textAlign: 'center' 
     }).attr({ 
      // why doesn't zIndex get the text in front of the chart? 
      zIndex: 999 
     }).add(); 
    }); 
}); 

Answer 3

Este fue el resultado de la búsqueda superior y las respuestas dadas no funcionaron para mí. Necesitaba más control sobre los puntos de datos que solo una simple matriz de matrices. Necesitaba usar objetos JSON para configurar opciones adicionales, como colores explícitos para datos específicos. A través de algunas investigaciones descubrí que no tienes que modificar tu formato de datos. Todo lo que tiene que hacer para hacer un gráfico circular en un gráfico de dona es simplemente establecer un valor de innerSize mayor que 0 en la serie de datos.

De la documentación Highcharts:

tamaño interno: El tamaño del diámetro interior para el pastel. Un tamaño superior a 0 representa un gráfico de rosquillas. Puede ser un porcentaje o un valor de píxel. Los porcentajes son relativos al tamaño del pastel. Los valores de píxel se dan como números enteros.

Así que usted puede obtener un simple gráfico de anillos con datos como los siguientes:

 series: [{ 
      innerSize: '30%', 
      data: [ 
       {name: 'Yellow Slice', y: 12, color: 'yellow'}, 
       {name: 'Red Slice', y: 10, color: 'red' }, 
       {name: 'Blue Slice', y: 33, color: 'blue'}, 
       {name: 'Green Slice', y: 20, color: 'green'} 
      ] 
     }] 

JS Fiddle