Question

我正在寻找一种在谷歌饼图中始终为最后一个切片着色的方法。最后一个片段标题为other，我不知道还有多少其他片片正在显示。我设置了以下垃圾箱......

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  google.load("visualization", "1", {packages:["corechart"]});

  google.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Other',    7]
    ]);

    var options = {
      title: 'My Daily Activities'
    };

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

    chart.draw(data, options);
  }

  google.setOnLoadCallback(drawChart2);
  function drawChart2() {

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

    var options = {
      title: 'My Daily Activities 2'
    };

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

    chart.draw(data, options);
  }
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<div id="piechart2" style="width: 900px; height: 500px;"></div>
</body>
</html>

我考虑过制作其他第一个回来的项目，它可以让我定位第一个项目的颜色，但是我需要一些方法来旋转饼图。据我所知，你只能按百分比而不是按片数来做。

Answer 1

如果您想更改切片的颜色，您可以在此图表上选择。

链接

https://developers.google.com/chart/interactive/docs/gallery/piechart

实施例

slices: [{color: 'black', {}, {}, {color: 'red'}] // order of the slice
slices: {0: {color: 'black'}, 3: {color: 'red'}} // number of the slice

您的代码已修改

我冒昧地改变第一张图表上的所有颜色，只需更改最后一张切片。

    <html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  google.load("visualization", "1", {packages:["corechart"]});

  google.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Other',    7]
    ]);

    var options = {
      title: 'My Daily Activities',
       slices: {
            0: { color: 'blue' },
            1: { color: 'red' },
             2: { color: 'orange' },
             3: { color: 'grey' },
             4: { color: 'black' }  

          }
    };

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

    chart.draw(data, options);
  }

  google.setOnLoadCallback(drawChart2);
  function drawChart2() {

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

    var options = {
      title: 'My Daily Activities 2',
       slices: {
             3: { color: 'black' }  

          }
    };

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

    chart.draw(data, options);
  }
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<div id="piechart2" style="width: 900px; height: 500px;"></div>
</body>
</html>

Answer 2

我相信您正在寻找pieResidueSliceColor

请参阅https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#configuration-options

这是符合指定阈值的数据的“其他”类别的颜色。

但是，如果您没有使用阈值other然后使用Hann的选项，您可以找出最后一个数据点数组的索引并使用slices:{idxYourFiguredOut:{fontColor:'red'}}但是api内置了一些内容

谷歌饼图中的最后切片颜色？

2 个答案:

链接

实施例

您的代码已修改