带 highcharts 的半 donot 图表

Question

我一直在尝试使用 Highcharts 库实现如下图表。

我所能达到的就是这个http://jsfiddle.net/HpdwR/1489/。那么有没有办法我可以控制外圈覆盖多少及其颜色。还将标题放在图表的中心。

这是我用来绘制图表的配置

{
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    title: {
        text: 'Browser market share, April, 2011'
    },
    yAxis: {
        title: {
            text: 'Total percent market share'
        }
    },
    plotOptions: {
        pie: {
            shadow: false
        }
    },
    tooltip: {
        formatter: function() {
            return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
        }
    },
    series: [{
        name: 'Browsers',
        data: [
            ["Chrome", 70]
        ],
        size: '60%',
        innerSize: '60%',
        showInLegend: true,
        dataLabels: {
            enabled: false
        }
    }]
}

我也想知道有没有其他的js库可以画出来。

工具提示图片

Answer 1

您可以使用带有圆形背景（而不是默认弧线）的实心型图表。

pane: {
        center: ['50%', '50%'],
        size: '100%',
        startAngle: 0,
        endAngle: 360,
        background: {
            backgroundColor: 'black',
            innerRadius: '0%',
            outerRadius: '80%',
            shape: 'circle'
        }
    },
plotOptions: {
            solidgauge: {
                dataLabels: {
                    enabled: true,
                    y: -25,
                    borderWidth: 0,
                    useHTML: true,
                    format: '<div style="text-align:center"><span style="font-size:45px;color:#fff;">{y}</span><br/>' +
                        '<span style="font-size:12px;color:silver">%</span></div>'
                }
            }
        },

示例： http://jsfiddle.net/12kwyftq/1/

Answer 2

您可以使用起始角度，结束角度来使其成为所需的视图

           startAngle: -90,
            endAngle: 90,
            center: ['50%', '75%']

示例fiddle