Google 图表添加特定颜色

Question

你好吗？

如何强制颜色？我不希望它们是随机的。我阅读了文档，但出了点问题。我不能说。他们帮我？非常感谢！

例如：我想要黑色的女子唱片和绿色的男子唱片。

此致！

google.charts.load('current', {'packages':['corechart']});  
   google.charts.setOnLoadCallback(drawChart);  
   function drawChart()  
   {  
    var data = google.visualization.arrayToDataTable([  
     ['status', 'number',{ role: 'style' },{ role: 'annotation' } ],  
    ["Men", 5, '#b87333','M'],
     ["Girl", 7, '#0000FF','G'],
        ]);  
    var options = {  
     title: 'Sex',  
     is3D:true,  
     pieHole: 0.4,
     //colors: ['#5cb85c','#f0ad4e']
     
    };  
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));  
    chart.draw(data, options);  
   }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>  
<script type="text/javascript"> </script>
<!--Div that will hold the pie chart-->
<div id="piechart"></div>

Answer 1

PieChart 支持的唯一 role 是 'tooltip'

不支持 'style' 和 'annotation'

您可以使用 colors 配置选项，

colors: ['#5cb85c','#000000']

或 slices 选项...

slices: [{color: '#5cb85c'}, {color: '#000000'}]

在以上两个选项中，数组中的第一种颜色将应用于数据中的第一行table，
第二种颜色，第二行，等等...

如果您不确定数据的顺序，
您可以使用对象将值映射到特定颜色

在这里，我们通过匹配数据 table、
中的值来构建颜色数组到颜色映射对象中的键...

var colors = [];
var colorMap = {
  'Men': '#5cb85c',
  'Girl': '#000000'
}
for (var i = 0; i < data.getNumberOfRows(); i++) {
  colors.push(colorMap[data.getValue(i, 0)]);
}

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['status', 'number'],
    ['Men', 5],
    ['Girl', 7]
  ]);

  var colors = [];
  var colorMap = {
    'Men': '#5cb85c',
    'Girl': '#000000'
  }
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    colors.push(colorMap[data.getValue(i, 0)]);
  }

  var options = {
    title: 'Sex',
    is3D: true,
    colors: colors
  };
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
});

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>  
<script type="text/javascript"> </script>
<!--Div that will hold the pie chart-->
<div id="piechart"></div>

Google 图表添加特定颜色

Google Chart Add Color Specific

html

charts

colors

google-visualization

pie-chart