使用Google Chart API在堆叠条形图中使用符号进行注释

我有一个堆叠条形图，其中我需要用$符号注释条形图，因为利润和成本是货币。

我成功地注释了没有货币符号的条形图，但无法显示前缀为$的条形图。有人能照亮这个吗

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
	packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var bar_chart_data = [
	["Material", "Cost", "Profit", { role: 'style' },{ role: 'style' }],
	["A", 100, 25, 'color: #F9F528','color: #0ACB53'],
	["B", 4.2, 1.764, 'color: #F9F528','color: #0ACB53'],
	["C", 110, 46.199999999999996, 'color: #F9F528','color: #0ACB53'],
	["D", 7.56, 3.1752, 'color: #F9F528','color: #0ACB53'],
	["E", 4.24, 1.7808, 'color: #F9F528','color: #0ACB53'],
	["F", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'],
	["G", 2, 0.84, 'color: #F9F528','color: #0ACB53'],
	["H", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'],
]
	var data = google.visualization.arrayToDataTable(bar_chart_data);
	var view = new google.visualization.DataView(data);
	view.setColumns([0, 1, {
			calc: "stringify",
			sourceColumn: 1,
			type: "string",
			role: "annotation"
		}, 3,  // <-- include style column
		2, {
			calc: "stringify",
			sourceColumn: 2,
			type: "string",
			role: "annotation"
		}, 4  // <-- include style column
	]);
	var options = {
		title: "Live individual material cost break-up (%)",
		width: 600,
		height: 400,
		bar: {
			groupWidth: "95%"
		},
		legend: {
			position: "none"
		},
		isStacked: 'percent',
hAxis: {
title: 'Percentage',
textStyle: {
fontSize: 8,
fontName: 'Muli',
bold: false,
},

titleTextStyle: {
fontSize: 12,
fontName: 'Muli',
bold: true,
}
},

vAxis: {
title: 'Material',
textStyle: {
fontSize: 10,
bold: false
},
titleTextStyle: {
fontSize: 12,
bold: true
}
}, 
	};
var chart = new google.visualization.BarChart(document.getElementById("material_bar_chart"));
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="material_bar_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>

使用谷歌的NumberFormat类

您可以创建一个模式，并设置每个数据列的格式。

var formatCurr = new google.visualization.NumberFormat({pattern: '$#,##0'});
formatCurr.format(data, 1);
formatCurr.format(data, 2);

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

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
	packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var bar_chart_data = [
	["Material", "Cost", "Profit", { role: 'style' },{ role: 'style' }],
	["A", 100, 25, 'color: #F9F528','color: #0ACB53'],
	["B", 4.2, 1.764, 'color: #F9F528','color: #0ACB53'],
	["C", 110, 46.199999999999996, 'color: #F9F528','color: #0ACB53'],
	["D", 7.56, 3.1752, 'color: #F9F528','color: #0ACB53'],
	["E", 4.24, 1.7808, 'color: #F9F528','color: #0ACB53'],
	["F", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'],
	["G", 2, 0.84, 'color: #F9F528','color: #0ACB53'],
	["H", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'],
]
	var data = google.visualization.arrayToDataTable(bar_chart_data);
var formatCurr = new google.visualization.NumberFormat({pattern: '$#,##0'});
formatCurr.format(data, 1);
formatCurr.format(data, 2);
	var view = new google.visualization.DataView(data);
	view.setColumns([0, 1, {
			calc: "stringify",
			sourceColumn: 1,
			type: "string",
			role: "annotation"
		}, 3,  // <-- include style column
		2, {
			calc: "stringify",
			sourceColumn: 2,
			type: "string",
			role: "annotation"
		}, 4  // <-- include style column
	]);
	var options = {
		title: "Live individual material cost break-up (%)",
		width: 600,
		height: 400,
		bar: {
			groupWidth: "95%"
		},
		legend: {
			position: "none"
		},
		isStacked: 'percent',
hAxis: {
title: 'Percentage',
textStyle: {
fontSize: 8,
fontName: 'Muli',
bold: false,
},

titleTextStyle: {
fontSize: 12,
fontName: 'Muli',
bold: true,
}
},

vAxis: {
title: 'Material',
textStyle: {
fontSize: 10,
bold: false
},
titleTextStyle: {
fontSize: 12,
bold: true
}
}, 
	};
var chart = new google.visualization.BarChart(document.getElementById("material_bar_chart"));
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="material_bar_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>

相关内容

最新更新

热门标签：