¿Gráfico de anillos de Highcharts sin pastel interior?

Question

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

¿Cómo puedo deshacerme del pastel interior y conservar el donut exterior, tal como lo 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 elementos (clave/valor).Especifique un innerSize para conseguir el estilo donut.

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

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

Aquí está 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 principal y las respuestas dadas no funcionan para mí.Necesitaba más control sobre los puntos de datos que solo una simple matriz de matrices.Necesitaba usar los objetos JSON para configurar opciones adicionales como colores explícitos para datos específicos.Descubrí algunas investigaciones que no tiene que modificar su formato de datos en absoluto.Todo lo que tiene que hacer para hacer un gráfico circular en un gráfico de donas es simplemente establecer un valor innediario mayor que 0 en la serie de datos.

de la documentación de los altos:

Innersize: el tamaño del diámetro interior para el pastel.Un tamaño mayor que 0 hace una tabla de donas.Puede ser un Porcentaje o valor de píxel.Los porcentajes son relativos al tamaño del pastel. Los valores de pixel se dan como enteros.

Para que pueda obtener una tabla de donas simple 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