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

问题描述

你好吗?

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

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

致敬！

google.charts.load('current', {'packages':['corechart']});google.charts.setOnLoadCallback(drawChart);函数 drawChart(){var 数据 = google.visualization.arrayToDataTable([['status', 'number',{ role: 'style' },{ role: 'annotation' } ],["男人", 5, '#b87333','M'],["女孩", 7, '#0000FF','G'],]);变量选项 = {title: '性',is3D:真，馅饼孔:0.4，//颜色:['#5cb85c','#f0ad4e']};var chart = new google.visualization.PieChart(document.getElementById('piechart'));图表绘制(数据，选项)；} 

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></脚本><script type="text/javascript"><!--将保存饼图的 Div--><div id="piechart"></div>

解决方案

PieChart唯一支持的role是'tooltip'

'style' 和 'annotation' 不支持

您可以使用 colors 配置选项，

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

或 slices 选项...

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

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

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

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

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

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

google.charts.load('current', {包:['corechart']}).then(函数(){var 数据 = google.visualization.arrayToDataTable([['状态'，'数字']，['男人'，5]，['女孩'，7]]);var 颜色 = [];var colorMap = {'男人':'#5cb85c'，'女孩':'#000000'}for (var i = 0; i < data.getNumberOfRows(); i++) {颜色.push(colorMap[data.getValue(i, 0)]);}变量选项 = {title: '性',is3D: 真,颜色:颜色};var chart = new google.visualization.PieChart(document.getElementById('piechart'));图表绘制(数据，选项)；});

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></脚本><script type="text/javascript"><!--将保存饼图的 Div--><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 Chart 添加特定颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！