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

Как я могу сделатьpie заполнение графика100% изdivэто содержится в?div имеет ширину198px и это высота152px.

Кроме того, я хотел бы иметьlinear-gradient эффект внутри каждого кусочка пирога, вы можете посоветовать, как это сделать?

enter image description here

 EricG31 июл. 2012 г., 13:30
Градиент может быть небольшой болью, потому что вы, вероятно, захотите использовать лучистый градиент. Вы должны переопределить свойство background с помощью градиентного излучения (убедитесь, что цвет фона прозрачный). И нам нужно будет посмотреть какой-нибудь HTML-код, чтобы рассказать вам, как вы могли бы его настроить, потому что просто картинка из старшей диаграммы довольно паршивая: P Если мы не пойдем на highcharts.org - нет;)
 Hardik Mishra31 июл. 2012 г., 10:57
Можете ли вы создать образец скрипки?jsfiddle.net

Ответы на вопрос(1)

Решение Вопроса

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

Code

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

Example (updated the fiddle to point to version 2.2.4)

Вотпример демонстрируя это.

As to the linear gradients, I don't know if they have been implemented yet, but here is an пример показывая радиальные градиенты.

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

Update

Looks like as of Highcharts 3.0, this is not possible anymore due to the chart auto-scaling within the plot area, an excerpt from their documentation:

size: The diameter of the pie relative to the plot area. Can be a percentage or pixel value. Pixel values are given as integers. The default behaviour (as of 3.0) is to scale to the plot area and give room for data labels within the plot area. As a consequence, the size of the pie may vary when points are updated and data labels more around. In that case it is best to set a fixed value, for example "75%". Defaults to .

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

Update (Aug 2014)

СогласноТорстейн & APOS; s комментарий, это действительно все еще возможно.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>

 01 авг. 2014 г., 16:18
Спасибо большое Торстейн!
 07 февр. 2018 г., 18:59
@epoch, есть идеи, если это все еще выполнимо с более поздними версиями Highchart, то есть 5+?
 03 окт. 2016 г., 15:15
Примечание. Если имена серий обновляются, чтобы они не могли поместиться в диаграмму, размер легенды будет изменен, чтобы уместиться внутри, а диаграмма будет изменена (уменьшена) независимо от установленного размера.
 01 авг. 2014 г., 12:46
Вам нужно установить для chart.margin и series.slicingOffset значение 0:jsfiddle.net/highcharts/xV8PM/2
 24 июл. 2014 г., 15:31
Я зарегистрировал проблему против высоких диаграмм относительно этой регрессии:github.com/highslide-software/highcharts.com/issues/3291

Ваш ответ на вопрос