Highcharts圆环图定制

时间:2012-08-31 16:31:39

标签: highcharts javascript donut-chart

我拥有highcharts的许可证,我想创建一个像下面那样的字符:

enter image description here

highcharts上最相似的组件如下:

enter image description here

有人知道是否可以将PIE替换为百分之一百?还是其他一些好的客户端javascript librarie来做呢?

您可以在以下链接中找到演示和API。

DEMO 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

由于

3 个答案:

答案 0 :(得分:24)

检查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." reference

您可以查看此example,其中显示了如何将text放入圆环图中。

希望对你有所帮助。

答案 1 :(得分:3)

您可以尝试使用标题作为替代方案,而非常简单的方法。

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

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

答案 2 :(得分:0)

 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();
}