自定義由Google Charts JS提供的甜甜圈圖

Question

必需甜甜圈圖

我想通過jgoogle圖表使用甜甜圈圖：

https://developers.google.com/chart/interactive/docs/gallery/piechart#making-a-donut-chart

 <html>
  <head>
     <script type="text/javascript"   src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
         };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }
</script>
  </head>
  <body>
   <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

我面臨的問題是如何使甜甜圈的一個部分比其他部分更厚； 即，如所附圖像中所示-（“必填圖”）。 有人可以幫忙嗎？

Answer 1

查看文檔，我認為這是不可能的。

您可以在甜甜圈圖中為每個“切片”設置偏移量，但這不會影響厚度：

var options = {
  title: 'My Daily Activities',
  pieHole: 0.4,
  slices: {0: {offset: 0.5}}, // positions the first slice out from the center
};

自定義由Google Charts JS提供的甜甜圈圖

問題描述

1 個解決方案

解決方案1
0 2016-09-13 17:23:27

自定義由Google Charts JS提供的甜甜圈圖

問題描述

1 個解決方案

解決方案1 0 2016-09-13 17:23:27

解決方案1
0 2016-09-13 17:23:27