使用Google图表库创建3个季度的甜甜圈图

如何解决使用Google图表库创建3个季度的甜甜圈图

我正在尝试使用Google图表库制作如下所示的甜甜圈图：

我发现this文章制作了一半甜甜圈，但没有找到在我的图片中创建甜甜圈的代码。 有人可以帮忙吗？

解决方法

在此处阅读https://developers.google.com/chart/interactive/docs/gallery/piechart#removing-slices 它只是说甜甜圈图只是饼图，其pieHole值在0到1之间。要删除一些切片，它说

要省略切片，请将颜色更改为“透明”：

      google.charts.load('current',{'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Pac Man','Percentage'],['',75],25]
        ]);

        var options = {
         legend: 'none',pieSliceText: 'none',pieHole: 0.4,pieStartAngle: 0,pieEndAngle: 180,tooltip: { trigger: 'none' },slices: {
            0: { color: 'yellow' },1: { color: 'transparent' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data,options);
      }

,

将pieSliceText和pieStartAngle与空白的数据字段一起使用；

google.charts.load('visualization','1.1',{
    'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    const data = google.visualization.arrayToDataTable([
        ['Skils','Skills level'],['React',6],['HTML',4],['PHP',2],[null,12]
    ]);

    new google.visualization.PieChart(document.getElementById('chart_div')).
    draw(data,{
        title: "My Skills",slices: {
          3: {
            color: 'transparent'
          }
        },pieHole: 0.5,width: 600,height: 600,pieSliceText: 'value',pieStartAngle: 270,});
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>