Вопрос по javascript, highcharts – HighCharts - сделать круговую диаграмму на 100% делением

35

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

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

enter image description here

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

Ваш Ответ

1   ответ
75

Вы можете достичь полной высоты круговой диаграммы, установив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>

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

Похожие вопросы