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

Question

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

Rob*_*las 2 javascript css google-visualization

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

Run Code Online (Sandbox Code Playgroud)

这里的JSFiddle示例:http: //jsfiddle.net/t9e3dcy3/5/

Answer 1

小智 5

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

这里有一些参考

归档时间：	9 年，11 月前
查看次数：	930 次
最近记录：	9 年，11 月前