Question

我已经创建了Google图表列的图表。我正在尝试仅自定义几个（不是全部）标签。我没有成功。

该图表逐日显示（作为字符串），累计销售总额（货币，信用卡和借记卡）以及呼叫次数。有两种vAx：一种用于销售，一种用于通话。

在有关条形图的文章中，我看到了一个示例，该示例根据样式的不同，标签保持为粗体（Google Charts: style specific labels），我尝试适应所创建的柱形图，但出现错误“无效的行索引8 。应该在[0-7]范围内。“;

我使用dataTable：

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柱形图图表文档中，我还没有找到一种自定义方法，但是在示例（Google Charts: style specific labels）中，一旦绘制了图表，我们就可以使用“就绪”事件图来修改标签。

在此示例中，“ 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>

Google Chart ColumnChart自定义一些标签，而不是全部

0 个答案: