[英]google charts HTML annotations
使用Google图表,可以添加文字注释。 但是,我需要显示图像。
这是一个JS小提琴(改编自其他人的代码),显示我正在尝试做的事情。 http://jsfiddle.net/Lgn4T/
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'});
data.addRows([
['Foo', 53, '<img src="bar.png"> Foo text', 'Foo description'],
['Bar', 71, 'Bar text', 'Bar description'],
['Baz', 36, 'Baz text', 'Baz description'],
['Cad', 42, 'Cad text', 'Cad description'],
['Qud', 87, 'Qud text', 'Qud description'],
['Pif', 64, 'Pif text', 'Pif description']
]);
是否可以通过注释或其他方式实现? 我需要使用折线图,因此其他方法必须考虑到这一点。
经过一些试验,我确定可以将图像添加到注释中,但只能添加到注释annotationText
列中。
为了使HTML批注起作用,您必须做两件事:首先,将annotationText
tooltip.isHtml
列的html
属性设置为true
,然后将图表的tooltip.isHtml
属性设置为true
,如下所示:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText', p: {html: true}});
data.addRows([
['Foo', 53, 'Foo text', '<img src="bar.png"> Foo description'],
['Bar', 71, 'Bar text', 'Bar description'],
['Baz', 36, 'Baz text', 'Baz description'],
['Cad', 42, 'Cad text', 'Cad description'],
['Qud', 87, 'Qud text', 'Qud description'],
['Pif', 64, 'Pif text', 'Pif description']
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
tooltip: {
isHtml: true
}
});
参见此处的工作示例: http : //jsfiddle.net/asgallant/7w2Hz/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.