javascript - tipos - propiedades de highcharts

Gráfico 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 pastel interior y el anillo externo (consulte: http://www.highcharts.com/demo/pie-donut )

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

Gracias.

Answer 1

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

Entonces tus parámetros contendrán algo como esto:

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

Aquí hay un jsFiddle de un ejemplo completo .

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 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 de Highcharts:

innerSize: El tamaño del diámetro interior del 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.

Para que pueda obtener un gráfico de dona simple con datos como el siguiente:

        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