Highcharts gráfico de anillos personalización

que tienen una licencia para Highcharts y me gustaría crear un char como el abajo:Highcharts gráfico de anillos personalización

enter image description here

El componente más similar sobre Highcharts es la siguiente:

enter image description here

¿Alguien sabe que es posible reemplazar el pastel dentro por un tanto por ciento? o alguna otra buena librería de JavaScript del lado del cliente para hacerlo?

Puede encontrar una demostración y la API en los siguientes enlaces.

DEMO http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-donut/

API http://api.highcharts.com/highcharts#chart

Gracias

Fuente

2012-08-31 Remo H. Jansen

comprobar sobre innerSize.

"The size of the inner diameter for the pie. A size greater than 0 renders a donut chart. Can be a percentage or pixel value. Percentages are relative to the size of the plot area. Pixel values are given as integers. Defaults to 0."reference

de lo que puede echar un vistazo esta example que muestra cómo poner la text dentro del gráfico de anillos.

Espero que te ayude.

Fuente

2012-08-31 17:21:31

Salida este ejemplo aquí: http://jsfiddle.net/wergeld/e2qpa/47/. Esto está usando el ejemplo que enumeró. Tantas posibilidades con esto. El único "defecto" que veo es alinear el círculo gris de fondo y el texto. Parece que el centro no está donde crees que debería estar cuando miras la carta final de rosquillas. – wergeld

@wergeld Muy bonito. –

Gracias muchachos, realmente aprecio su ayuda :) –

function(chart4) { 
chart4.renderer.text('<span style="word-wrap: break-word !important;">Reduced by <br/>10 Years</span>', (chart4.chartWidth/2)-38, (chart4.chartHeight/2)-5) 
      .css({ 

       color: '#4b4b4b', 
       fontWeight: 'bold', 
       fontSize: '12px' 

      }) 
      .add(); 
}

Fuente

2014-01-02 13:01:14

puede intentar utilizar título como un enfoque alternativo y bastante simple.

  title: { 
       text: 'Budget', 
       align: 'center', 
       verticalAlign: 'middle', 
       style: { 
        fontSize: '9.5px' 
       } 
      },

jsFiddle: http://jsfiddle.net/amigoo/zwod86e1/

Fuente

2015-09-16 07:26:13

Highcharts gráfico de anillos personalización

Respuesta

Cuestiones relacionadas