Google pie chart single value

问题

I am using a Google Pie Chart and have a problem modifying it. After many complicated calculations I get a percentage value, say 67%. I want that single percentage value to be shown in pie/donut chart.

My HTML code is

<div id="chart_div"></div>

My Javascript code is

function drawChart() {
var data = google.visualization.arrayToDataTable([
    ['Category', 'Value'],
    ['Foo', 67]
]);

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {
    height: 400,
    width: 600,
    pieHole: 0.5,
    pieSliceTextStyle: {
        color: '#000000'
    }
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

You can have a look here http://jsfiddle.net/asgallant/mx03tcx5/

How do I make the graph cover up only 67% of the pie instead of 100%, since I am only providing a single value. Is there any other way to achieve this..

回答1:

add this

slices: {
            1: { color: 'transparent', textStyle : {color:'transparent'} }
          }

to the same scope with pieSliceTextStyle. And add

['', 33]

after ['Foo', 67].

For more info you can check this : Google Developers

After modification :

chart.draw(data, {
        height: 400,
        width: 600,
        pieHole: 0.5,
        pieSliceTextStyle: {
            color: '#000000'
        },
        slices: {
            1: { color: 'transparent', textStyle : {color:'transparent'} }
          }
    });


var data = google.visualization.arrayToDataTable([
        ['Category', 'Value'],
        ['Foo', 67],
        ['', 33]
    ]);

if you want to check it in jsfiddle http://jsfiddle.net/4oxbnmqr/

来源：https://stackoverflow.com/questions/27010286/google-pie-chart-single-value

标签

javascript

charts

pie-chart