Google Charts 堆叠的列，每一列都有不同的注释 [英] Google Charts stacked columns with different annotations for each piece of the column
问题描述
我希望你能帮助我:
我有一个堆积柱形图，所有柱形图都有两个值在每一列中堆积.我已经成功创建了图表，但我需要为每列的每一部分添加一个注释(我不知道它的正确名称)，表明该部分在它自己的列中代表的总数的百分比.
在下面给出的示例中，我需要设置注释，以便显示堆积的列，并且对于第一列，好"区域上应该有一个注释，值为60%"，另一个注释用于40%"的坏"区域，依此类推.
到目前为止，我已经设法包含一个注释，显示坏"区域的百分比值，该区域浮动到每一列的顶部.我需要帮助来正确定义列的每个区域的注释，并希望将其放置在给定区域的中心.
预先感谢您的帮助.
TL;DR:我需要对每列的每一部分进行居中注释.
<div id="chart" style="width: 900px; height: 500px; border: 1px solid black;"><script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript">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 view = new google.visualization.DataView(data);view.setColumns([{标签:'日期'，类型:'字符串'，计算:函数(dt，行){var str = dt.getValue(row, 0);return { v: str, f: str.toString('dd/MM/aaaa') };}}, {标签:'好',类型:'数字'，计算:函数(dt，行){var good = dt.getValue(row, 1);var bad = dt.getValue(row, 2);return { v: good/(good + bad), f: good.toString() };}}, {标签:'坏',类型:'数字'，计算:函数(dt，行){var good = dt.getValue(row, 1);var bad = dt.getValue(row, 2);return { v: bad/(good + bad), f: bad.toString() };}},{角色:'注释'，类型:'字符串'，计算:函数(dt，行){var good = dt.getValue(row, 1);var bad = dt.getValue(row, 2);var perc =(坏/(好+坏))* 100；var an = parseFloat(Math.round(perc).toFixed(2)) + "%";return { v: ann, f: ann.toString() };}}]);变量选项 = {title: '日常行为',isStacked: 真,vAxis:{ 格式:'#.##%'}};var chart = new google.visualization.ColumnChart(document.getElementById('chart'));图表绘制(视图，选项)；}
您需要在Good"列之后添加另一个注释列:
view.setColumns([{标签:'日期'，类型:'字符串'，计算:函数(dt，行){var str = dt.getValue(row, 0);return { v: str, f: str.toString('dd/MM/aaaa') };}}, {标签:'好',类型:'数字'，计算:函数(dt，行){var good = dt.getValue(row, 1);var bad = dt.getValue(row, 2);return { v: good/(good + bad), f: good.toString() };}}, {角色:'注释'，类型:'字符串'，计算:函数(dt，行){var good = dt.getValue(row, 1);var bad = dt.getValue(row, 2);var perc = (good/(good + bad)) * 100;var ann = perc.toFixed(2) + "%";返回安;}}, {标签:'坏',类型:'数字'，计算:函数(dt，行){var good = dt.getValue(row, 1);var bad = dt.getValue(row, 2);return { v: bad/(good + bad), f: bad.toString() };}}, {角色:'注释'，类型:'字符串'，计算:函数(dt，行){var good = dt.getValue(row, 1);var bad = dt.getValue(row, 2);var perc =(坏/(好+坏))* 100；var ann = 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;
}
}]);
这篇关于Google Charts 堆叠的列，每一列都有不同的注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
