当前位置:  开发笔记 > 编程语言 > 正文

格式化Google sankey图表的自定义HTML工具提示框

如何解决《格式化Googlesankey图表的自定义HTML工具提示框》经验,为你挑选了1个好方法。

我在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/



1> 小智..:

尝试将此更改 data.addColumn({type: 'string', role: 'tooltip'});data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});

这里有一些参考

推荐阅读
携手相约幸福
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有