如何改变谷歌甜甜圈洞内部区域的背景颜色？(How to change background color of inner area of Google Donut hole?)

我正在使用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); }

结果，我仍然无法改变颜色。

I'm using Google Pie Chart API and trying to create this UI

This is what I have : Fiddle

I'm not sure how to change the color of the inner area of the circle.

According to the Google Chart API, I found that chartArea.backgroundColor is one of the Configuration Options, so I tried it in here

---

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); }

Result, I still couldn't get to change the color.

最满意答案

在做了一些研究之后，使用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 Config

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' };

After doing some research, the piehole is not able to be colored using Google's config.

The chartArea.backgroundColor that you speak of correlates to the entire area that the chart area takes up, not the PieHole, you have a few options however.

This is where it will cover without any solution and correct syntax

Example with no solutions.

Your second option is this, give the background a transparent background and use positioning to lay a div it behind your chart.

Example with div laid behind chart

As of right now, those seem to be the only option, i've read through the docs multiple times and there just isn't a way to specifically style the pieHole. Sorry it's not the solution you're looking for, but it will work, atleast.

<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 Config

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' };如何改变谷歌甜甜圈洞内部区域的背景颜色？(How to change background color of inner area of Google Donut hole?)

我正在使用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); }

结果，我仍然无法改变颜色。

I'm using Google Pie Chart API and trying to create this UI

This is what I have : Fiddle

I'm not sure how to change the color of the inner area of the circle.

According to the Google Chart API, I found that chartArea.backgroundColor is one of the Configuration Options, so I tried it in here

---

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); }

Result, I still couldn't get to change the color.

最满意答案

在做了一些研究之后，使用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 Config

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' };

After doing some research, the piehole is not able to be colored using Google's config.

The chartArea.backgroundColor that you speak of correlates to the entire area that the chart area takes up, not the PieHole, you have a few options however.

This is where it will cover without any solution and correct syntax

Example with no solutions.

Your second option is this, give the background a transparent background and use positioning to lay a div it behind your chart.

Example with div laid behind chart

As of right now, those seem to be the only option, i've read through the docs multiple times and there just isn't a way to specifically style the pieHole. Sorry it's not the solution you're looking for, but it will work, atleast.

<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 Config

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' };