Google图表添加特定颜色 [英] Google Chart Add Color Specific

问题描述

你好吗?

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

例如:我想要黑色的女士记录和绿色的男士记录.

Regarts！

  google.charts.load('current'，{'packages':['corechart']});;google.charts.setOnLoadCallback(drawChart);函数drawChart(){var data = google.visualization.arrayToDataTable([['状态'，'数字'，{角色:'样式'}，{角色:'注释'}]，["Men"，5，'#b87333'，'M']，["Girl"，7，'#0000FF'，'G']，]);var options = {标题:性别"，is3D:true，pieHole:0.4，//颜色:['#5cb85c'，'#f0ad4e']};var chart = new google.visualization.PieChart(document.getElementById('piechart'));chart.draw(数据，选项);}  

 < script type ="text/javascript" src ="https://www.gstatic.com/charts/loader.js"></script>< script type ="text/javascript"></script><！-将保留饼图的分区->< div id ="piechart"></div>  

解决方案

PieChart 支持的唯一 role 是'tooltip'

样式" 和注释" 均不受支持

您可以使用 colors 配置选项

 颜色:['#5cb85c'，'#000000'] 

或 slices 选项...

 切片:[{color:'#5cb85c'}，{color:'#000000'}] 

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

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

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

  var colors = [];var colorMap = {'男子':'#5cb85c'，'女孩':'#000000'}for(var i = 0; i< data.getNumberOfRows(); i ++){colors.push(colorMap [data.getValue(i，0)]);} 

请参阅以下工作摘要...

  google.charts.load('current'，{软件包:['corechart']}).then(function(){var data = google.visualization.arrayToDataTable([['状态'，'数字']，['Men'，5]，['Girl'，7]]);var colors = [];var colorMap = {'男子':'#5cb85c'，'女孩':'#000000'}for(var i = 0; i< data.getNumberOfRows(); i ++){colors.push(colorMap [data.getValue(i，0)]);}var options = {标题:性别"，is3D:是的，颜色:颜色};var chart = new google.visualization.PieChart(document.getElementById('piechart'));chart.draw(数据，选项);});  

 < script type ="text/javascript" src ="https://www.gstatic.com/charts/loader.js"></script>< script type ="text/javascript"></script><！-将保留饼图的分区->< div id ="piechart"></div>  

How are you?

How do I force the color? I do not want them to be random. I read the documentation, but something is wrong. I can not tell. They help me? Thank you very much!

For Example: I want the Womens records in Black and the mens in Green.

Regarts!

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>

解决方案

the only role supported by PieChart is 'tooltip'

both 'style' and 'annotation' are not supported

you can either use the colors configuration option,

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

or the slices option...

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

in both options above, the first color in the array will be applied to the first row in the data table,
the second color, the second row, etc...

if you're not sure in which order the data will be,
you can use an object to map the values to a specific color

here, we build the array of colors, by matching the values in the data table,
to the key in the color map object...

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

see following working snippet...

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图表添加特定颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！