谷歌图表添加颜色特定答案

【问题标题】：Google Chart Add Color Specific谷歌图表添加颜色特定
【发布时间】：2018-10-09 07:22:41
【问题描述】：

你好吗？

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

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

问候！

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>

【问题讨论】：

标签： html charts colors google-visualization pie-chart

【解决方案1】：

PieChart 支持的唯一role 是'tooltip'

'style' 和 'annotation' 不支持

您可以使用colors 配置选项，

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

或slices 选项...

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

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

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

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

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

请参阅以下工作 sn-p...

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>

【讨论】：