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

Question

I am using custom HTML tooltips in Google sankey charts but the tooltip text box appears very elongated and doesn't recognise HTML tags in the tooltip text. 我在Google sankey图表中使用了自定义HTML工具提示，但工具提示文本框显得很长，无法识别工具提示文本中的HTML标签。 Does anyone know how to fix this? 有谁知道如何解决这一问题？

   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 example here: http://jsfiddle.net/t9e3dcy3/5/ 这里的JSFiddle示例： http : //jsfiddle.net/t9e3dcy3/5/

Answer 1

Try changing this data.addColumn({type: 'string', role: 'tooltip'}); 尝试更改此data.addColumn({type: 'string', role: 'tooltip'}); to data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}}); 到data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});

Here is some reference 这是一些参考

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

问题描述

1 个解决方案

解决方案1
5 2016-01-06 18:51:49

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

问题描述

1 个解决方案

解决方案1 5 2016-01-06 18:51:49

解决方案1
5 2016-01-06 18:51:49