Google Chart Добавить определенный цвет - PullRequest
Новая
       44

Google Chart Добавить определенный цвет

0 голосов
/ 28 апреля 2018

Как дела?

Как мне заставить цвет? Я не хочу, чтобы они были случайными. Я прочитал документацию, но что-то не так. Я не могу сказать. Они мне помогают? Большое спасибо!

Например: я хочу женские записи в черном и мужские в зеленом.

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>

1 Ответ

0 голосов
/ 28 апреля 2018

единственное 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)]);
}

см. Следующий рабочий фрагмент ... 

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