Highcharts donut chart without inner pie?

问题

I've been searching for the solution to generate the simplest donut chart with Highcharts library. However, all examples of Highcharts show the style of chart with both inner pie and outer donut (refer to: http://www.highcharts.com/demo/pie-donut)

How can I get rid of the inner pie and just keep the outer donut, just like other libraries do? (something like RGraph: http://www.rgraph.net/examples/donut.html)

Thank you.

回答1:

You just need to provide the data as an array of two element (key / value) arrays. Specify an innerSize to get the donut style.

So your parameters will contain something like this:

...
data: [["Firefox",6],["MSIE",4],["Chrome",7]],
innerSize: '20%',
...

Here's a jsFiddle of a complete example.

回答2:

**I hope this example of highchat will solve your problum

http://jsfiddle.net/e2qpa/3/

$(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },

        plotOptions: {
            pie: {
                borderColor: '#000000',
                innerSize: '60%'
            }
        },
        series: [{
            data: [
                ['Firefox', 44.2],
                ['IE7', 26.6],
                ['IE6', 20],
                ['Chrome', 3.1],
                ['Other', 5.4]
                ]}]
    },
    // using

    function(chart) { // on complete

        var xpos = '50%';
        var ypos = '53%';
        var circleradius = 102;

    // Render the circle
    chart.renderer.circle(xpos, ypos, circleradius).attr({
        fill: '#ddd',
    }).add();

    // Render the text
    chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({
            width: circleradius*2,
            color: '#4572A7',
            fontSize: '16px',
            textAlign: 'center'
      }).attr({
            // why doesn't zIndex get the text in front of the chart?
            zIndex: 999
        }).add();
    });
});

回答3:

This was the top search result and the answers given did not work for me. I needed more control over the data points than just a simple array of arrays. I needed to use JSON objects to configure additional options like explicit colors for specific data. I found through some research that you don't have to modify your data format at all. All you have to do in order to make a pie chart into a donut chart is to just set an innerSize value greater than 0 in the data series.

From the highcharts documentation:

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 pie size. Pixel values are given as integers.

So you can obtain a simple donut chart with data like the following:

        series: [{
            innerSize: '30%',
            data: [
                {name: 'Yellow Slice', y: 12, color: 'yellow'},
                {name: 'Red Slice', y: 10, color: 'red' },
                {name: 'Blue Slice', y: 33, color: 'blue'},
                {name: 'Green Slice', y: 20, color: 'green'}
            ]
        }]

JS Fiddle

来源：https://stackoverflow.com/questions/11678684/highcharts-donut-chart-without-inner-pie

标签

javascript

html5

Highcharts

donut-chart