0

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

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

4

3 回答 3

2

在做了一些研究后，无法使用 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'
              };
于 2015-08-04T19:14:14.907 回答
1

我不认为这可以通过谷歌图表轻松实现。我会推荐一种不同的方法，也许是使用 anellipse和 some的 SVG text-elements。

想着这样的事情。

于 2015-08-04T19:02:22.817 回答
1

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

演示链接：

于 2015-08-04T19:07:56.470 回答