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

带有高图的半唐图

2 个答案: