格式化Google sankey圖表的自定義HTML工具提示框

我在Google sankey圖表中使用自定義HTML工具提示，但工具提示文本框顯得非常細長，並且無法識別工具提示文本中的HTML標籤。有誰知道如何解決這一問題？格式化Google sankey圖表的自定義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/

來源

2016-01-06 Robert Nicholas

嘗試改變這種data.addColumn({type: 'string', role: 'tooltip'}); 到data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});

Here一定的參考

來源

2016-01-06 18:51:49 geo

格式化Google sankey圖表的自定義HTML工具提示框

回答

相關問題