使用Google Chart API在堆叠条形图中的符号注解 [英] Annotation with symbols inside stacked bar charts using Google Chart API
本文介绍了使用Google Chart API在堆叠条形图中的符号注解的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个堆积的条形图，在这里需要用$符号注释条形图，因为利润和成本是货币.
I have a stacked bar chart where I need to annotate the bars with $ symbol as the profit and costs are currency.
我成功注释了没有货币符号的条，但是无法显示带$的前缀.任何人都可以对此发表看法
I am successful in annotating of the bars without currency symbol but I am unable to display with the $ prefixed. Could anyone throw light on this
<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>
推荐答案
使用Google的NumberFormat类
您可以创建一个模式，并格式化每个数据列.
you can create a pattern, and format each data column.
var formatCurr = new google.visualization.NumberFormat({pattern: '$#,##0'});
formatCurr.format(data, 1);
formatCurr.format(data, 2);
请参阅以下工作片段...
see following working snippet...
<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>
这篇关于使用Google Chart API在堆叠条形图中的符号注解的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
