如何更改 Google 甜甜圈洞内部区域的背景颜色？

Question

我正在使用 Google 饼图 API 并尝试创建此 UI

这是我的：Fiddle

我不知道如何更改圆圈内部区域的颜色。

根据Google Chart API，我发现chartArea.backgroundColor是配置选项之一，所以我在这里试了一下

JS

  google.setOnLoadCallback(drawChart);

  function drawChart() {

      var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work', 11]
      ]);

      var options = {
          width: 160,
          height: 160,

          chartArea: {
              left: 10,
              top: 20,
              width: '100%',
              height: '100%'

          },
          colors: ['#F46E4E', '#F9C262', '#ADB55E', ],
          legend: 'none',
          enableInteractivity: false,
          pieSliceText: 'none',
          pieHole: 0.85,
          //chartArea.backgroundColor:'pink' // Try it here

      };

      var chart = new google.visualization.PieChart(document.getElementById('piechart'));

      chart.draw(data, options);
  }

结果，还是改不了颜色

Answer 1

我认为 google 图表无法轻松实现这一点。我会推荐一种不同的方法，也许是使用 ellipse 和一些 text-elements.

的 SVG

想像 this。

Answer 2

如果你不想使用jQuery，你还有另一个选择是css3

示例如下：

circle {
  fill: yellowgreen;
  stroke: #655;
  stroke-width: 30;
}

<svg width="100" height="100">
<circle r="30" cx="50" cy="50" />
</svg>

这是完整的文档 http://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/

Demo Link :

Answer 3

经过一些研究，无法使用 Google 的配置对圆饼孔进行着色。

您所说的 chartArea.backgroundColor 与图表区域占据的整个区域相关，而不是 PieHole，但是您有一些选择。

本文将在没有任何解决方案和正确语法的情况下涵盖

Example with no solutions.

你的第二个选择是，给背景一个透明的背景，并使用定位在你的图表后面放置一个div它。

Example with div laid behind chart

截至目前，这些似乎是唯一的选择，我已经多次阅读文档，但没有一种方法可以专门设计 pieHole 的样式。抱歉，这不是您正在寻找的解决方案，但它至少会起作用。

<div class="piehole"></div>

.piehole{
    display:block;
    background:green;
    height:140px;
    width:140px;
    position:absolute;
    z-index:-1;
    border-radius:100%;
    top:27px;
    left:23px;
}

JS 配置

var options = {
                  width: 160,
                  height: 160,

                  chartArea: {
                      left: 10,
                      top: 20,
                      width: '100%',
                      height: '100%'

                  },
                  colors: ['#F46E4E', '#F9C262', '#ADB55E', ],
                  legend: 'none',
                  enableInteractivity: false,
                  pieSliceText: 'none',
                  pieHole: 0.85,
                  backgroundColor:'transparent'
              };

如何更改 Google 甜甜圈洞内部区域的背景颜色？

How to change background color of inner area of Google Donut hole?

javascript

css

google-api

google-visualization

donut-chart

JS