谷歌饼图单值答案

【问题标题】：Google pie chart single value谷歌饼图单值
【发布时间】：2014-11-19 06:21:03
【问题描述】：

我正在使用 Google 饼图，但在修改它时遇到了问题。经过许多复杂的计算，我得到一个百分比值，比如 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%，因为我只提供一个值。有没有其他方法可以实现这一点..

【问题讨论】：

快速修复：只需创建一个具有剩余百分比的虚拟数据集。毕竟，它必须是某事的 67%。
嘿，我一直在使用您建议的相同技巧。感谢那！但我一直在寻找更具体的解决方案，如果有的话。不管怎样，谢谢你的回复。

标签： javascript charts pie-chart

【解决方案1】：

添加这个

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

到与 pieSliceTextStyle 相同的范围。和添加

['', 33]

在 ['Foo', 67] 之后。

有关更多信息，您可以查看：Google Developers

修改后：

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/

【讨论】：

感谢您的回复。另外，你能不能帮我把阴影部分的数字 67 去掉，然后把它放在圆圈的中间，孔。 .. 我尝试在你的小提琴上使用图例选项，但我不能这样做。