HighCharts - 使饼图成为div的100％

How can I make a pie chart fill 100% of the divit is contained in? The div has a width of 198px and it's height is 152px.

如何制作饼图填充100%的divit包含在? div的宽度为198px,高度为152px。

Additionally I would like to have a linear-gradient effect inside each pie slice, can you advise on how to do that?

另外我想在每个饼图片中都有一个线性渐变效果,你能建议怎么做吗?

1 个解决方案

#1

You can achieve the full height of the pie chart by setting the size attribute in the plotOptions of pie and removing margins, spacing and titles from the chart.

您可以通过在pie的plotOptions中设置size属性并从图表中删除边距,间距和标题来实现饼图的完整高度。

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)

示例(更新小提琴指向2.2.4版)

Here is an example demonstrating this.

这是一个证明这一点的例子。

As to the linear gradients, I don't know if they have been implemented yet, but here is an example showing radial gradients.

至于线性渐变,我不知道它们是否已经实现,但这里是一个显示径向渐变的例子。

Radial gradients are also part of Highcharts 3.0 now, here is an example

径向渐变现在也是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:

看起来像Highcharts 3.0,由于绘图区域内的图表自动缩放,这是不可能的,这是他们的文档的摘录:

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 .

size:饼图相对于绘图区域的直径。可以是百分比或像素值。像素值以整数给出。默认行为(从3.0开始)是缩放到绘图区域并为绘图区域内的数据标签腾出空间。因此,当更新点并且数据标签更多时,饼图的大小可能会有所不同。在这种情况下,最好设置固定值,例如“75%”。默认为。

in my opinion this should not be the case since dataLabels are disabled. should probably be logged as a bug

在我看来,由于dataLabels被禁用,因此不应该这样。应该记录为bug

Update (Aug 2014)

更新(2014年8月)

As per Torstein's comment, this is indeed still possible. slicedOffset needs to be set to 0 in addition to the margins begin set. (example)

根据托尔斯坦的评论,这确实仍有可能。除了边距开始设置之外,slicOffset需要设置为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>