我在 Google sankey 图表中使用自定义 HTML 工具提示，但工具提示文本框看起来很长，无法识别工具提示文本中的 HTML 标签。有谁知道如何解决这一问题？
google.load("visualization", "1.1", {
packages: ["sankey"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
var formatter = new google.visualization.NumberFormat({pattern:'$###.## bn'});
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Revenues');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
['Fred', 'Ann', 107.91,],
['Bill', 'Ann', 47.86],
['Carol', 'Ann', 817.9],
['Jim', 'Kevin', 400],
['Ann', 'Kevin', 973.67],
['Sally', 'Kevin', 146.47],
['Kevin', 'EVP Sales', 1520.14]
].map(function(d) {
d.push(formatter.formatValue(d[2])+ ' This is an HTML tooltip<br>It needs to be formatted nicely<br>in a rectangular box that is not <i>long and thin</i>');
return d;
}));;
var options = {
width: 500,
height: 300,
tooltip: {isHtml: true},
formatNumber: '$### m',
sankey: {
iterations: 64,
node: {
pattern: '$### m',
nodePadding: 30,
interactivity: true,
label: {
fontName: 'Times-Roman',
fontSize: 14,
color: '#871b47',
bold: false,
italic: true
}
},
link: {
pattern: '$###.## bn'
},
allowHtml: 'true',
tooltip: {
isHtml: 'true'
}
}
};
var formatter = new google.visualization.NumberFormat({
prefix: '$',
pattern: '$###.## m'
});
formatter.format(data, 2);
var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple', 'HTML_tooltip'));
chart.draw(data, options);
}
<body>
<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>
<div id="HTML_tooltip" style="position: relative;
left: 30px;" ></div>
</body>
这里的 JSFiddle 示例: http://jsfiddle.net/t9e3dcy3/5/
最佳答案
尝试更改此 data.addColumn({type: 'string', role: 'tooltip'});
到 data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
Here有引用意义
关于javascript - 为谷歌桑基图格式化自定义 HTML 工具提示框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34638434/