web-dev-qa-db-ja.com

ハイチャートドーナツグラフのカスタマイズ

ハイチャートのライセンスを持っており、次のようなチャーを作成したいと思います。

enter image description here

ハイチャートで最も類似したコンポーネントは次のとおりです。

enter image description here

内部のPIEをわずか1パーセント交換できることを誰かが知っていますか？またはそれを行うための他の良いクライアント側のjavascriptライブラリー？

デモとAPIは次のリンクにあります。

デモ http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-donut/

API http://api.highcharts.com/highcharts#chart

ありがとう

highchartsjavascriptdonut-chart
15
Remo H. Jansen

innerSizeについて確認してください。

"The size of the inner diameter for the pie. A size greater than 0 renders a donut chart. Can be a percentage or pixel value. Percentages are relative to the size of the plot area. Pixel values are given as integers. Defaults to 0."参照

これを見ることができます 例 これは、ドーナツグラフ内にtextを配置する方法を示しています。

お役に立てば幸いです。

24
Ricardo Alvaro Lohmann

代わりに、かなり単純なアプローチとしてtitleを使用してみてください。

            title: {
                text: 'Budget',
                align: 'center',
                verticalAlign: 'middle',
                style: {
                    fontSize: '9.5px'
                } 
            },

JsFiddle： http://jsfiddle.net/amigoo/zwod86e1/

3
Faisal Ashfaq
 function(chart4) {
chart4.renderer.text('<span style="Word-wrap: break-Word !important;">Reduced by <br/>10 Years</span>', (chart4.chartWidth/2)-38, (chart4.chartHeight/2)-5)
             .css({

                color: '#4b4b4b',
                fontWeight: 'bold',
                fontSize: '12px'

            })
            .add();
}
0
M Thomas