Google visualization 使用谷歌图表API注释条形图
我正在尝试向水平条添加注释,类似于所附图表图像中的注释。[例如:条形图'1'的注释为“7.4%(+2.4/-.19)”,条形图'3'的注释为“11.7%(+2.9/-2.4)”,以及图像中的平均垂直线表示法] 我使用了条形图,并配置了渲染条形图和间隔的选项。但是,根据GoogleCharts API文档,条形图在其角色中不支持注释/注释文本 我必须从谷歌图表API中选择哪个图表? 我必须配置哪些选项来标记注释? 有没有任何例子可以用谷歌图表API解释这个问题 这张图片摘自谷歌消费者调查页面() 谢谢Google visualization 使用谷歌图表API注释条形图,google-visualization,Google Visualization,我正在尝试向水平条添加注释,类似于所附图表图像中的注释。[例如:条形图'1'的注释为“7.4%(+2.4/-.19)”,条形图'3'的注释为“11.7%(+2.9/-2.4)”,以及图像中的平均垂直线表示法] 我使用了条形图,并配置了渲染条形图和间隔的选项。但是,根据GoogleCharts API文档,条形图在其角色中不支持注释/注释文本 我必须从谷歌图表API中选择哪个图表? 我必须配置哪些选项来标记注释? 有没有任何例子可以用谷歌图表API解释这个问题 这张图片摘自谷歌消费者调查页面()
目前无法创建google visualization中显示的图表。您可以使用创建错误条,但
条形图不支持注释(这意味着您不能像发布的示例中那样在图表上显示文本)
你可以摆弄一个可以支持注释的组合图,但是你会被柱状图(不是条形图)卡住
以下是条形图的代码:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn({type:'string', label:'label'});
data.addColumn({type:'number', label:'value', pattern:'#.#%'});
data.addColumn({type:'number', role:'interval', pattern:'#.#%'}); // interval role col.
data.addColumn({type:'number', role:'interval', pattern:'#.#%'}); // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col. -- not enabled for bar charts
data.addColumn({type:'string', role:'annotationText'}); // annotationText col. -- not enabled for bar charts
data.addRows([
['1', 0.074, 0.055, 0.098, 'A', '7.4% (-1.9/2.4)'],
['2', 0.04, 0.027, 0.059, 'B', '4.0% (-1.3/1.9)'],
['3', 0.117, 0.093, 0.146, 'C', '11.7% (-2.4/2.9)'],
['4', 0.217, 0.185, 0.252, 'D', '21.7% (-3.2/3.5)'],
['5', 0.552, 0.511, 0.592, 'E', '55.2% (-4.1/4.0)'],
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"SubPopulation B",
width:600, height:400,
vAxis: {title: "Importance"},
hAxis: {title: "Percent", format:'#%'},
}
);
}
下面是组合图版本的代码:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn({type:'string', label:'label'});
data.addColumn({type:'number', label:'value', pattern:'#.#%'});
data.addColumn({type:'number', label:'line', pattern:'#.#%'});
data.addColumn({type:'number', role:'interval', pattern:'#.#%'}); // interval role col.
data.addColumn({type:'number', role:'interval', pattern:'#.#%'}); // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col. -- not enabled for bar charts
data.addColumn({type:'string', role:'annotationText'}); // annotationText col. -- not enabled for bar charts
data.addRows([
['1', 0.074, 0.074, 0.055, 0.098, '7.4% (-1.9/2.4)', '7.4% (-1.9/2.4)'],
['2', 0.040, 0.040, 0.027, 0.059, '4.0% (-1.3/1.9)', '4.0% (-1.3/1.9)'],
['3', 0.117, 0.117, 0.093, 0.146, '11.7% (-2.4/2.9)', '11.7% (-2.4/2.9)'],
['4', 0.217, 0.217, 0.185, 0.252, '21.7% (-3.2/3.5)', '21.7% (-3.2/3.5)'],
['5', 0.552, 0.552, 0.511, 0.592, '55.2% (-4.1/4.0)', '55.2% (-4.1/4.0)'],
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Subpopulation B',
width: 600,
height: 400,
vAxis: {title: "Percentage", format:'#%'},
hAxis: {title: "Importance"},
seriesType: "bars",
series: {1: {type: "line"}}
});
}
您可以使用这些选项隐藏线条,并使其看起来更漂亮一些,但一般来说,它看起来会很相似(不像您的示例那样漂亮)
如果这两个都不适合您,那么您将需要编写自定义javascript来手动向条形图添加工具提示(注释)。我不知道该怎么做(因为我不是javascript专家),所以如果上述解决方法不够好,我将把这件事留给您来做。看看这把小提琴:
它成功地使用columns系列将标签放置在组合图的顶部。通过少量调整,您可以将标签放在条的前面左对齐
“神奇”的部分是:
/* Here comes the hack!
We're going to add a svg text element to each column bar.
This code will work for this data setup only. If you add/remove a series, this code must be adapted
*/
rects = mydiv.find('svg > g > g > g > rect');
var row = 0;
for (i = 0; i < rects.length; i++) {
// this selector also retrieves gridlines
// we're excluding them by height
el = $(rects[i]);
if (parseFloat(el.attr("height")) <= 2) { continue; }
aparent = el.parent();
do { // skips 'null' values
text = data.getValue(row++, 1);
} while (text == null && row < data.getNumberOfRows());
if (text) {
text = formatter.formatValue(text);
// see below
pos = getElementPos(el);
attrs = {x: pos.x + pos.width / 2, y: pos.y - 2,
fill: 'black', 'font-family': 'Arial', 'font-size': 11, 'text-anchor': 'middle'};
aparent.append(addTextNode(attrs, text, aparent));
}
}
function getElementPos($el) {
// returns an object with the element position
return {
x: parseFloat($el.attr("x")),
width: parseFloat($el.attr("width")),
y: parseFloat($el.attr("y")),
height: parseFloat($el.attr("height"))
}
}
function addTextNode(attrs, text, _element) {
// creates an svg text node
var el = document.createElementNS('http://www.w3.org/2000/svg', "text");
for (var k in attrs) { el.setAttribute(k, attrs[k]); }
var textNode = document.createTextNode(text);
el.appendChild(textNode);
return el;
}
/*黑客来了!
我们将向每个列栏添加一个svg文本元素。
此代码仅适用于此数据设置。如果添加/删除系列,则必须调整此代码
*/
rects=mydiv.find('svg>g>g>g>rect');
var行=0;
对于(i=0;i