我在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
It needs to be formatted nicely
in a rectangular box that is not long and thin'); 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); }
这里的JSFiddle示例:http: //jsfiddle.net/t9e3dcy3/5/
尝试将此更改 data.addColumn({type: 'string', role: 'tooltip'});
为data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
这里有一些参考