HighCharts Donut Chart без внутреннего пирога?

Question

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

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

Спасибо.

Answer 1

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

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

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

.

Вот a 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 Size, более 0 в серии данных.

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

Инженерство: размер внутреннего диаметра для Пирог.Размер большее, чем 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 Widdle