谷歌图表HTML注释 [英] 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列的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/

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注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！