如何更改Google Donut孔内部区域的背景颜色？

Question

我正在使用Google Pie Chart 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的配置对孔进行着色。

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

这将在没有任何解决方案和正确语法的情况下进行介绍

没有解决方案的示例 。

您的第二个选择是，为背景提供透明背景，并使用定位将div放置在图表后面。

div放在图表后面的示例

截至目前，这些似乎是唯一的选择，我已经多次阅读了文档，并且还没有一种专门设计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'
              };

Answer 2

我认为使用Google图表无法轻松实现这一目标。 我建议使用其他方法，例如使用ellipse和一些text-elements的SVG。

思考像这样 。

Answer 3

如果您不想使用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/

演示链接：