谷歌饼图单值(Google pie chart single value)

2019-10-21 06:43发布

我使用的是谷歌饼图和有问题修改它。 许多复杂的计算,我得到一个百分比值后,说67%。 我希望这样的馅饼/甜甜圈图表显示一个百分比值。

我的HTML代码

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

我的JavaScript代码

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

你可以在这里看看http://jsfiddle.net/asgallant/mx03tcx5/

如何使图形掩盖只有67%的蛋糕,而不是100%,因为我只是提供了一个单一的价值。 是否有任何其他的方式来实现这一目标..

Answer 1:

添加此

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

与pieSliceTextStyle范围相同。 并添加

['', 33]

之后[ '富',67]。

欲了解更多信息,你可以检查: 谷歌开发者

修改后:

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]
    ]);

如果您要检查它的jsfiddle http://jsfiddle.net/4oxbnmqr/



文章来源: Google pie chart single value