web-dev-qa-db-ja.com

HighCharts-円グラフをdivの100％にします

pieチャートを塗りつぶす100%のdivitは含まれていますか？ divの幅は198pxそして、その高さは152px。

さらに、linear-gradient各パイスライス内の効果、それを行う方法についてアドバイスできますか？

enter image description here

javascripthighcharts
36
Alon

パイのsizeにplotOptions属性を設定し、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を指すようにフィドルを更新）

以下に 例 を示します。

線形勾配については、それらがまだ実装されているかどうかはわかりませんが、ここでは 例 放射状勾配を示しています。

放射状グラデーションもHighcharts 3.0の一部になりました。これは 例 です

更新

Highcharts 3.0のように見えますが、これはプロットエリア内のグラフの自動スケーリングのために、ドキュメントからの抜粋により、もはや不可能です。

サイズ：プロット領域に対する円の直径。パーセンテージまたはピクセル値にすることができます。ピクセル値は整数として与えられます。 デフォルトの動作（3.0以降）は、プロットエリアに合わせてスケーリングし、プロットエリア内のデータラベルのためのスペースを確保します。結果として、サイズポイントが更新され、データラベルがさらに大きくなると、円の大きさが変わる場合があります。その場合、「75％」などの固定値を設定するのが最適です。デフォルトはです。

私の意見では、dataLabelsが無効になっているため、これは当てはまらないはずです。おそらく bug として記録されるはずです

更新（2014年8月）

Torstein'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>
78
epoch