谷歌图表堆放着不同的注解列，每件列 [英] Google Charts stacked columns with different annotations for each piece of the column
问题描述
我希望你能帮助我这个：
我有层叠列的图表，它们都具有两个值中的每一列堆叠。我已经成功地创建图表，但我需要添加注释，每件每列的（我不知道它的正确名称）指示由一块在它自己的专栏psented总重$ P $的百分比。
在下面的例子中，我需要设置注释所以它会显示层叠列和，对于第一列应具有与值60％的良好区的注释和另一个注释为的40％，差区域中，等等。
到目前为止，我已成功地包括一个注释表示为差区域，这floates到每一列的顶部的百分比值。我需要帮助来正确的定义注释为列的每个区域，并希望把它集中在它的特定区域。
感谢您提前对您有所帮助。
TL; DR：我需要为中心的注解，每件每列
。 ＆LT;身体GT;
＆LT; DIV ID =图的风格=WIDTH：900px;高度：500像素;边界：1px的纯黑色;＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT;脚本类型=文/ JavaScript的SRC =https://www.google.com/jsapi＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
的google.load（可视化，1，{软件包：[corechart]}）;
google.setOnLoadCallback（drawChart）;
功能drawChart（）{
VAR数据= google.visualization.arrayToDataTable（[
['日期'，'好'，'坏']，
[日期（2013，11，1），3，2]
[日期（2013，11，2），5,3]
[日期（2013年，11，3），9,2]，
[日期（2013年，11，4），6，3]
]）; VAR视图=新google.visualization.DataView（数据）; view.setColumns（[{
标签：'日期'，
类型：'串'，
计算：函数（DT，行）{
变种海峡= dt.getValue（行，0）;
返回{V：STR，F：str.toString（'DD / MM / AAAA'）};
}
}
{
标签：'好'，
类型：'数'，
计算：函数（DT，行）{
VAR好= dt.getValue（行，1）;
变种坏= dt.getValue（行，2）;
返回{V：好/（+好不好），F：good.toString（）};
}
}，{
标签：'坏'，
类型：'数'，
计算：函数（DT，行）{
VAR好= dt.getValue（行，1）;
变种坏= dt.getValue（行，2）;
返回{V：坏/（+好不好），F：bad.toString（）};
}
}，
{
角色：'注释'，
类型：'串'，
计算：函数（DT，行）{
VAR好= dt.getValue（行，1）;
变种坏= dt.getValue（行，2）;
VAR PERC =（坏/（好+坏））* 100;
变种安= parseFloat（Math.round（PERC）.toFixed（2））+％;
返回{V：安安，F：ann.toString（）};
}
}]）; VAR的选择= {
标题：每日事迹，
isStacked：真实，
vAxis：{格式：＃##％。'}
}; VAR图=新google.visualization.ColumnChart（的document.getElementById（'表'））;
chart.draw（视图选项）;
}
＆LT; / SCRIPT＆GT;
您需要你的好列之后添加另一个注解列：
view.setColumns（[{
标签：'日期'，
类型：'串'，
计算：函数（DT，行）{
变种海峡= dt.getValue（行，0）;
返回{V：STR，F：str.toString（'DD / MM / AAAA'）};
}
}，{
标签：'好'，
类型：'数'，
计算：函数（DT，行）{
VAR好= dt.getValue（行，1）;
变种坏= dt.getValue（行，2）;
返回{V：好/（+好不好），F：good.toString（）};
}
}，{
角色：'注释'，
类型：'串'，
计算：函数（DT，行）{
VAR好= dt.getValue（行，1）;
变种坏= dt.getValue（行，2）;
VAR PERC =（好/（好+坏））* 100;
变种安= perc.toFixed（2）+％;
返回安;
}
}，{
标签：'坏'，
类型：'数'，
计算：函数（DT，行）{
VAR好= dt.getValue（行，1）;
变种坏= dt.getValue（行，2）;
返回{V：坏/（+好不好），F：bad.toString（）};
}
}，{
角色：'注释'，
类型：'串'，
计算：函数（DT，行）{
VAR好= dt.getValue（行，1）;
变种坏= dt.getValue（行，2）;
VAR PERC =（坏/（好+坏））* 100;
变种安= perc.toFixed（2）+％;
返回安;
}
}]）;
I hope you can help me with this:
I have a chart of stacked columns, all of them with two values to stack in each column. I have successfully created the chart BUT I need to add an annotation for each piece of each column (I don't know the proper name for it) indicating the percentage of the total represented by the piece in it's own column.
In the example given below, I would need to set the annotations so it would show the stacked columns and, for the first column should have an annotation on the "Good" area with value "60%" and another annotation for the "Bad" area of "40%", and so on.
So far, I have managed to include one annotation that shows the percentage value for the "Bad" area, which floates to the top of each column. I would need help to properly define the annotation for each area of the column and, hopefully, place it centered in it's given area.
Thank you in advance for your help.
TL;DR: I need centered annotations for each piece of each column.
<body>
<div id="chart" style="width: 900px; height: 500px; border: 1px solid black;">
</div>
</body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Good', 'Bad'],
[Date(2013, 11, 1), 3, 2],
[Date(2013, 11, 2), 5, 3],
[Date(2013, 11, 3), 9, 2],
[Date(2013, 11, 4), 6, 3]
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
label: 'Date',
type: 'string',
calc: function (dt, row) {
var str = dt.getValue(row, 0);
return { v: str, f: str.toString('dd/MM/aaaa') };
}
}
, {
label: 'Good',
type: 'number',
calc: function (dt, row) {
var good = dt.getValue(row, 1);
var bad = dt.getValue(row, 2);
return { v: good / (good + bad), f: good.toString() };
}
}, {
label: 'Bad',
type: 'number',
calc: function (dt, row) {
var good = dt.getValue(row, 1);
var bad = dt.getValue(row, 2);
return { v: bad / (good + bad), f: bad.toString() };
}
},
{
role: 'annotation',
type: 'string',
calc: function (dt, row) {
var good = dt.getValue(row, 1);
var bad = dt.getValue(row, 2);
var perc = (bad / (good + bad)) * 100;
var ann = parseFloat(Math.round(perc).toFixed(2)) + "%";
return { v: ann, f: ann.toString() };
}
}]);
var options = {
title: 'Daily deeds',
isStacked: true,
vAxis: { format: '#.##%' }
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(view, options);
}
</script>
You need to add another annotation column after your "Good" column:
view.setColumns([{
label: 'Date',
type: 'string',
calc: function (dt, row) {
var str = dt.getValue(row, 0);
return { v: str, f: str.toString('dd/MM/aaaa') };
}
}, {
label: 'Good',
type: 'number',
calc: function (dt, row) {
var good = dt.getValue(row, 1);
var bad = dt.getValue(row, 2);
return { v: good / (good + bad), f: good.toString() };
}
}, {
role: 'annotation',
type: 'string',
calc: function (dt, row) {
var good = dt.getValue(row, 1);
var bad = dt.getValue(row, 2);
var perc = (good / (good + bad)) * 100;
var ann = perc.toFixed(2) + "%";
return ann;
}
}, {
label: 'Bad',
type: 'number',
calc: function (dt, row) {
var good = dt.getValue(row, 1);
var bad = dt.getValue(row, 2);
return { v: bad / (good + bad), f: bad.toString() };
}
}, {
role: 'annotation',
type: 'string',
calc: function (dt, row) {
var good = dt.getValue(row, 1);
var bad = dt.getValue(row, 2);
var perc = (bad / (good + bad)) * 100;
var ann = perc.toFixed(2) + "%";
return ann;
}
}]);
这篇关于谷歌图表堆放着不同的注解列，每件列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
