javascript - 使用 Google 图表库创建 3 个季度圆环图

Question

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

我找到了这篇制作半个甜甜圈的文章，但没有找到在我的图像中创建该甜甜圈的代码。任何人都可以帮忙吗？

Answer 1

在这里阅读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);
      }

Answer 2

与空数据字段一起 使用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>