HighCharts - сделайте круговую диаграмму 100% от div

Ответ 1

Вы можете достичь полной высоты круговой диаграммы, установив атрибут size в plotOptions pie и удалив margins, spacing и titles из диаграммы.

код

    chart: {           
        margin: [0, 0, 0, 0],
        spacingTop: 0,
        spacingBottom: 0,
        spacingLeft: 0,
        spacingRight: 0
    },
    plotOptions: {
        pie: {
            size:'100%',
            dataLabels: {
                enabled: false
            }
        }
    }

Пример (обновлен скрипт, чтобы указать на версию 2.2.4)

Вот пример , демонстрирующий это.

Что касается линейных градиентов, я не знаю, были ли они реализованы еще, но вот пример, показывающий радиальные градиенты.забастовкa >

Радиальные градиенты теперь также являются частью Highcharts 3.0, вот пример

Обновление

Похоже, что с Highcharts 3.0 это больше невозможно из-за автоматического масштабирования диаграммы в области графика, выдержки из их документации:

size: диаметр пирога относительно площади участка. Может быть процентным или пиксельным значением. Значения пикселей задаются как целые числа. Поведение по умолчанию (по состоянию на 3.0) - это масштабирование в области графика и предоставление места для меток данных в пределах области графика.. Как следствие, размер пирога может изменяться, когда точки обновляются, а данные этикетки больше вокруг. В этом случае лучше установить фиксированное значение, например "75%". По умолчанию.

по-моему, это не должно быть так, поскольку dataLabels отключены. вероятно, будет зарегистрирован как ошибка .

Обновление (август 2014 г.)

Согласно комментарию Торштейна, это действительно возможно. slicedOffset необходимо установить значение 0 в дополнение к начальному набору полей. (пример)

$(function () {
    $('#container').highcharts({
        title: null,
        chart: {
            type: 'pie',
            margin: 0
        },
        
        plotOptions: {
            pie: {
                slicedOffset: 0,
                size: '100%',
                dataLabels: {
                    enabled: false
                }
            }
        },
        
        series: [{
            data: [
                ['Firefox',   44.2],
                ['IE7',       26.6],
                ['IE6',       20],
                ['Chrome',    3.1],
                ['Other',    5.4]
            ]
        }]
    });
});

#container {
    outline: 1px solid red;
    padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500"></div>