Хай-чарты пончик без внутреннего пирога?

Question

Я искал решение для создания простейшей кольцевой диаграммы с библиотекой Highcharts. Тем не менее, все примеры Highcharts показывают стиль диаграммы как с внутренним пирогом, так и с внешним пончиком (см.: http://www.highcharts.com/demo/pie-donut)

Как я могу избавиться от внутреннего пирога и просто сохранить внешний пончик, как это делают другие библиотеки? (что-то вроде RGraph: http://www.rgraph.net/examples/donut.html)

Спасибо.

Answer 1

Вам просто нужно предоставить данные в виде массива из двух элементов (ключ / значение). Укажите innerSize чтобы получить стиль пончик.

Так что ваши параметры будут содержать что-то вроде этого:

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

Вот jsFiddle полного примера.

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

Это был лучший результат поиска, и ответы не дали мне результатов. Мне нужно больше контроля над точками данных, чем просто массив массивов. Мне нужно было использовать объекты JSON для настройки дополнительных параметров, таких как явные цвета для конкретных данных. В результате некоторых исследований я обнаружил, что вам вообще не нужно изменять формат данных. Все, что вам нужно сделать, чтобы превратить круговую диаграмму в кольцевую диаграмму, это просто установить значение innerSize больше 0 в ряду данных.

Из документации Highcharts:

innerSize: размер внутреннего диаметра для пирога. Размер больше 0 отображает кольцевую диаграмму. Может быть в процентах или в пикселях. Проценты по отношению к размеру пирога. Значения пикселей даны как целые числа.

Таким образом, вы можете получить простую кольцевую диаграмму с такими данными:

        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