javascript - HighCharts - 円グラフを div の 100% にする

Question

それが含まれているpieグラフの塗りつぶし100%を作成するにはどうすればよいですか? divのdiv幅は で198px、高さは152pxです。

さらにlinear-gradient、各パイ スライス内に効果を持たせたいのですが、その方法についてアドバイスをいただけますか?

Answer 1

size円グラフの属性を設定し、グラフからとplotOptionsを削除することmarginsで、円グラフの高さ全体を実現できます。spacingtitles

コード

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

例 (バージョン 2.2.4 を指すようにフィドルを更新)

これを示す例を次に示します。

線形グラデーションに関しては、まだ実装されているかどうかはわかりませんが、放射状グラデーションを示す例を次に示します。

放射状グラデーションもハイチャート 3.0 の一部になりました。例を次に示します。

アップデート

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

size: プロット エリアに対するパイの直径。パーセンテージまたはピクセル値を指定できます。ピクセル値は整数として与えられます。デフォルトの動作 (3.0 以降) では、プロット エリアに合わせてスケーリングし、プロット エリア内にデータ ラベル用のスペースを確保します。結果として、ポイントが更新され、データ ラベルがより周囲にある場合、円のサイズが異なる場合があります。その場合は、「75%」などの固定値を設定するのが最適です。デフォルトは です。

私の意見では、無効になっているため、これは当てはまりませんdataLabels。おそらくバグとして記録されるべきです

更新 (2014 年 8 月)

Torstein のコメントによると、これは確かにまだ可能です。margins begin set に加えて を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>