Question

你好吗？

如何强制颜色？我不希望它们是随机的。我阅读了文档，但有些不对劲。我不能说。他们帮帮我？非常感谢你！

例如：我想要黑色的女性记录和绿色的男装。

Regarts！

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

role支持的唯一PieChart为'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)]);
}

请参阅以下工作代码段...

＆＃13;

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

＆＃13;

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

＆＃13;

Google Chart添加特定颜色

1 个答案: