Google Chart ColumnChart пользовательские некоторые метки, не все - PullRequest
Новая
       29

Google Chart ColumnChart пользовательские некоторые метки, не все

0 голосов
/ 26 октября 2018

Я создал диаграмму столбцов Google Chart.Я пытаюсь настроить только несколько (не все) ярлыки.У меня ничего не получилось.

Диаграмма отображает день ото дня (в виде строки), общие суммы продаж (деньги, кредитные и дебетовые карты) и количество вызовов.Есть два vAxes: один для продаж и один для звонков.

В посте о гистограмме я видел пример того, как в зависимости от стиля метка остается жирным шрифтом ( Google Charts:специфичные для стиля метки ) Я попытался приспособиться к созданной мной диаграмме столбца, но ошибка «Недопустимый индекс строки 8. Должен быть в диапазоне [0-7].»;

Я использую таблицу данных:

var data2 = new google.visualization.DataTable ();
data2.addColumn ('string', 'Time');
data2.addColumn ('number', 'Cash');
data2.addColumn ('number', 'Debit');
data2.addColumn ('number', 'Credit');
data2.addColumn ('number', 'Calls');
data2.addColumn ({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
data2.addColumn ({type: 'string', role: 'style'});

Роль: 'подсказка', которую я использую для настройки отображения результатов;все нормально.Роль: «стиль» используется для сохранения дня недели (день недели: воскресенье, понедельник, вторник, среда, четверг, пятница, суббота).Если это значение Sun, я бы хотел сделать метку жирной.Намерение состоит в том, чтобы более четко определить дни недели (используя воскресенье в качестве справочного материала)

Я не хочу менять цвет или стиль графического объекта, только метку.Из документации к диаграмме Google Columns я не нашел способа настройки, но в примере ( Google Charts: специфичные для стиля метки ) мы можем использовать «готовую» диаграмму событий для изменения меток, как только диаграммабыло нарисовано.

В этом примере 7 октября должно быть выделено жирным шрифтом.

Может ли кто-нибудь мне помочь? 

	google.charts.load('current', {'packages':['corechart']});
	google.charts.setOnLoadCallback(drawStacked);

	function drawStacked() {
		var data2 = new google.visualization.DataTable();
		data2.addColumn('string', 'Horário');		// 0
		data2.addColumn('number', 'Cash');		// 1
		data2.addColumn('number', 'Debit');			// 2
		data2.addColumn('number', 'Credit');		// 3
		data2.addColumn('number', 'Calls');	// 4
		data2.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});	//5
		data2.addColumn({type: 'string', role: 'style'});		// 6

		data2.addRows([
			['1/oct', 2.53, 1.24, 3.87, 6, '<b>6 full</b>', 'Mon'],
			['2/oct', 8.10, 2.34, 7.18, 4, '<b>4 single</b>', 'Tue'], 
			['3/oct', 8.33, 2.40, 3.48, 6, '<b>6 single and full</b>', 'Wed'],
			['4/oct', 5.40, 6.10, 3.48, 5, '<b>5 single</b>', 'Thu'],
			['5/oct', 8.49, 9.60, 4.80, 9, '<b>9 full</b>', 'Fri'],
			['6/oct', 3.78, 1.96, 1.10, 4, '<b>4 single</b>', 'Sat'],
			['7/oct', 1.59, 1.60, 3.50, 5, '<b>5 full</b>', 'Sun'],
			['8/oct', 3.79, 1.86, 3.48, 4, '<b>4 full and single</b>', 'Mon']
		]);

		var options2 = {
			title: 'Sales for day: Out/2018',
			// This line makes the entire category's tooltip active.
			focusTarget: 'category',
			// Use an HTML tooltip.
			tooltip: { isHtml: true },
			animation: {
				duration: 1000,
				easing: 'out',
				startup: true
			},
			legend: { position: "top" },
			isStacked: true,
			hAxis: {
				title: 'Sales for Month (retail)',
				format: 'H:mm',
			},
			vAxis: {
				title: 'Sales'
			},
			seriesType: 'bars',
			series: {
				0: {axis: 'valor', targetAxisIndex:0},
				1: {targetAxisIndex:0},
				2: {targetAxisIndex:0},
				3: {axis: 'qtd', type: 'line', targetAxisIndex:1}
			},
			vAxes: { 
				0: {title: 'R$ Sold'},
				1: {title: 'total Calls'}
			},
		};

		var chartContainer2 = document.getElementById('chartDiv2');
		var chart2 = new google.visualization.ColumnChart(chartContainer2);
	
//		// use the 'ready' event to modify the chart once it has been drawn
		google.visualization.events.addListener(chart2, 'ready', function () {
			var labels2 = chartContainer2.getElementsByTagName('text');

			for (var i2 = 0; i2 < labels2.length; i2++) {
			// determine if label should be bold
				//the alert show the value for labels, but I can´t set atribute and the lenght is wrong;
        //alert("valor é: " + i2 + " - data: " + data2.getValue(i2, 6));
				if (data2.getValue(i2, 6).indexOf('Sun') > -1) {
					labels2[i2].setAttribute('font-weight', 'Bold');
				} // if
			} // for
		});
		chart2.draw(data2, options2);		
		
	}
<!doctype html>
<html lang="pt-br">
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
	----------<br>
	<div id="chartDiv2"></div><br>
	----------
</body>
</html>
...