With Google Charts, it is possible to have text annotations. I however require an image to be displayed.Here's a JS fiddle (adapted from someone else's code) showing what I'm trying to do. 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']]);Is this possible through annotations, or by other means? I need to use the line chart, so other methods would have to take this into account. 解决方案 After some experimentation, I determined that you can add images to the annotations, but only to the annotationText column.In order to make the HTML annotations work, you must do two things: first, set the annotationText column's html property to true, and then set the chart's tooltip.isHtml property to true, like this: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 }});See working example here: http://jsfiddle.net/asgallant/7w2Hz/ 这篇关于谷歌图表HTML注释的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
08-29 03:02