Highcharts甜甜圈图表自定义

Question

我有一个Highcharts的许可证，并且想要创建像下面这个图表一样的图表：

Highcharts上最相似的组件是以下组件：

有人知道是否可以将饼图(Pie)替换为百分比，或者使用其他好用的客户端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

谢谢

- Remo H. Jansen

Answer 1

检查 innerSize 参数。

"饼图内径的大小。大于0的值将渲染为甜甜圈图表。可以是百分比或像素值。百分比相对于绘图区域的大小。像素值是整数。默认为0。" 参考链接

你可以查看这个示例，它展示了如何在甜甜圈图表中放置 text。

希望能对你有所帮助。

- Ricardo Alvaro Lohmann

---

请看这个例子：http://jsfiddle.net/wergeld/e2qpa/47/。这是使用您列出的示例。有很多可能性。我唯一看到的“缺陷”是在对齐背景灰色圆和文本时。当查看最终的甜甜圈图表时，中心似乎不是您认为应该在的位置。 - wergeld

Answer 2

你可以尝试使用title作为一个替代方案，这是一种更简单的方法。

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

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

- Faisal Ashfaq

Answer 3

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

- M Thomas