web-dev-qa-db-ja.com

インナーパイなしのハイチャートドーナツチャート？

Highchartsライブラリを使用して最も単純なドーナツチャートを生成するソリューションを探しています。ただし、Highchartsのすべての例は、内側のパイと外側の​​ドーナツの両方を持つチャートのスタイルを示しています（参照： http://www.highcharts.com/demo/pie-donut ）

他のライブラリと同じように、内側のパイを取り除き、外側のドーナツだけを保持するにはどうすればよいですか？ （RGraphのようなもの： http://www.rgraph.net/examples/donut.html ）

ありがとうございました。

javascripthtml5highchartsdonut-chart
33
Jonathan Chen

2つの要素（キー/値）配列の配列としてデータを提供する必要があります。ドーナツスタイルを取得するには、innerSizeを指定します。

したがって、パラメーターには次のようなものが含まれます。

...
data: [["Firefox",6],["MSIE",4],["Chrome",7]],
innerSize: '20%',
...

完全な例のjsFiddle です。

91
andypaxo
**I hope this example of highchat will solve your problum

http://jsfiddle.net/e2qpa/3/

$(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },

        plotOptions: {
            pie: {
                borderColor: '#000000',
                innerSize: '60%'
            }
        },
        series: [{
            data: [
                ['Firefox', 44.2],
                ['IE7', 26.6],
                ['IE6', 20],
                ['Chrome', 3.1],
                ['Other', 5.4]
                ]}]
    },
    // using

    function(chart) { // on complete

        var xpos = '50%';
        var ypos = '53%';
        var circleradius = 102;

    // Render the circle
    chart.renderer.circle(xpos, ypos, circleradius).attr({
        fill: '#ddd',
    }).add();

    // Render the text
    chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({
            width: circleradius*2,
            color: '#4572A7',
            fontSize: '16px',
            textAlign: 'center'
      }).attr({
            // why doesn't zIndex get the text in front of the chart?
            zIndex: 999
        }).add();
    });
});
2
Khandad Niazi

これが一番上の検索結果であり、与えられた答えはうまくいきませんでした。単純な配列の配列よりも、データポイントをさらに制御する必要がありました。 JSONオブジェクトを使用して、特定のデータの明示的な色などの追加オプションを構成する必要がありました。いくつかの調査を通じて、データ形式をまったく変更する必要がないことがわかりました。円グラフをドーナツグラフにするために必要なことは、データ系列で0より大きいinnerSize値を設定するだけです。

ハイチャートのドキュメントから：

innerSize：パイの内径のサイズ。サイズが0より大きい場合、ドーナツグラフがレンダリングされます。パーセンテージまたはピクセル値にすることができます。割合は、パイのサイズに相対的です。ピクセル値は整数として与えられます。

そのため、次のようなデータを含む簡単なドーナツグラフを取得できます。

        series: [{
            innerSize: '30%',
            data: [
                {name: 'Yellow Slice', y: 12, color: 'yellow'},
                {name: 'Red Slice', y: 10, color: 'red' },
                {name: 'Blue Slice', y: 33, color: 'blue'},
                {name: 'Green Slice', y: 20, color: 'green'}
            ]
        }]

JSフィドル

0
Jon Dysinger