HighCharts - 使饼图占 div 的 100%

Posted 2023-02-16

【中文标题】HighCharts - 使饼图占 div 的 100%

【英文标题】：HighCharts - Make the pie chart 100% of the div

【发布时间】：2012-07-28 22:27:48

【问题描述】：

如何使pie 图表填充100% 中包含的div？ div 的宽度为198px，高度为152px。

另外，我想在每个饼片中添加一个linear-gradient 效果，您能否建议如何做到这一点？

【问题讨论】：

你能生成样本小提琴吗？ jsfiddle.net

渐变可能会有点痛苦，因为您可能想要使用辐射渐变。您应该使用辐射渐变覆盖背景属性（确保背景颜色是透明的）。而且我们需要查看一些 html 以便告诉您如何调整它，因为仅来自 highchart 的图片非常糟糕 :P 除非我们去 highcharts.org - 不是 ;)

【参考方案1】：

我的解决方案； （对于图例位置边距顶部错误..）

chart: 
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie',
                    height:'100%' // added...
                ,

plotOptions: 
        pie: 
            size:'100%',
             height: '100%',
            dataLabels: 
                enabled: false
            
        
    

【讨论】：

请正确格式化您的代码并将其放入代码块中。见formatting

【参考方案2】：

您可以通过在饼图的plotOptions 中设置size 属性并从图表中删除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）

这里有一个example 演示了这一点。

关于线性渐变，我不知道它们是否已经实现，但这里有一个example 显示径向渐变。

径向渐变现在也是 Highcharts 3.0 的一部分，这里是 example

更新

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

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

在我看来，这不应该是这样，因为dataLabels 已被禁用。可能应该记录为bug

更新（2014 年 8 月）

根据Torstein's 的评论，这确实是可能的。除了边距开始设置之外，slicedOffset 还需要设置为 0。 (example)

$(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>

【讨论】：

我已经记录了关于此回归的 highcharts 问题：github.com/highslide-software/highcharts.com/issues/3291

您需要将chart.margin和series.slicingOffset设置为0：jsfiddle.net/highcharts/xV8PM/2

非常感谢托斯坦！

注意：如果系列名称已更新，无法适应图表，则图例将调整大小以适合内部，并且图表将调整大小（缩小），无论大小设置如何。

@epoch，知道这对于更高版本的 highchart 是否仍然可行，即 5+？