Google 饼图切片 3d

Question

我正在 js 中开发小饼图视觉效果，并使用 Google 图表 SDK 实现相同的效果

一切正常，但是当我切片馅饼并旋转馅饼起始角度时，切片的馅饼不是 3d 的

预期图表：

带有切片和旋转饼图的 Google 图表看起来像这样

我需要像上图中的 3D 切片饼（绿色）一样获得切片饼以及整个饼图的蓝色背景

附上同样的剪刀

如果需要任何其他事情来解决此问题，请告知

<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',     75],
          ['Eat',      25],
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
          slices: {  1: {offset: 0.2},                   
          },
          pieStartAngle: 100,
        };

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

Answer 1

我发现如果你颠倒行的顺序，
就可以正常显示3D效果了。

将切片反转后，我手动提供了颜色以匹配默认值。

唯一的其他区别是图例条目的顺序。

请参阅以下工作片段...

<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'],
          ['Eat',     25],
          ['Work',      75],
        ]);

        var options = {
          colors: ['dc3912', '3366cc'],
          title: 'My Daily Activities',
          is3D: true,
          slices: {
            1: {offset: 0.2},                   
          },
          pieStartAngle: 12
        };

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

Google 饼图切片 3d

问题描述投票：0回答：1

1个回答

最新问题

Google 饼图切片 3d

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1