如何在Google中指定数字格式's sankey charts/D3

How to specify number formats in Google's sankey charts / D3

本文关键字：sankey charts D3 格式 Google 数字      更新时间：2023-09-26

我已经成为谷歌sankey图表的忠实粉丝，但有一件事困扰着我——我不知道如何进行数字格式化，以便相关单位与数字一起显示在第三列数据表中。我已经尝试了几种方法——试图使用格式化程序设置"模式"选项，但就我的生活而言，似乎什么都不起作用——参见这个JSFiddle示例：http://jsfiddle.net/nickdunbar/t9e3dcy3/1/

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'
        },

数字格式对其他谷歌图表类型如此流畅，我简直不敢相信在某个地方没有可用的选项。它不在谷歌文档中。我看过D3的文献，但也没有明显的结果。

请参阅有关自定义工具提示内容的文档，了解实现所需功能的方法。您需要将自定义工具提示的内容指定为数据的另一列：

data.addColumn({type: 'string', role: 'tooltip'});

通过根据您的模式指定自定义格式化程序

var formatter = new google.visualization.NumberFormat({pattern:'$###.## bn'});

然后可以通过映射输入来附加信息：

data.addRows([
        ['Fred','Ann',107.91], 
        ['Bill','Ann',47.86],
        // more input...
    ].map(function(d) {
        d.push(formatter.format(d[2]);   // the tooltip's formatted content as last column
        return d; 
    }));

使用这个映射，你可以应用你想要的每一种数字格式，或者做一些更花哨的事情，比如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]));
        	return d; 
    	}));
       
    // Set chart options
    var options = {
      width: 500,
      height: 300,
        formatNumber: '$### bn',
        sankey: {
		iterations: 64,
		node: {
		pattern: '$### bn', nodePadding: 30, interactivity: true, label: { fontName: 'Times-Roman',
                         fontSize: 14,
                         color: '#871b47',
                         bold: false,
                         italic: true }	
		},
		link: {
			//colorMode: 'source',
			pattern: '$### bn'
			},
	allowHtml: 'true',
	tooltip: {isHtml: 'true'}
			}
    };
    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
    chart.draw(data, options);
   }
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    
</script>
<body>
    <div id="sankey_multiple" style="width: 900px; height: 300px;"></div>
</body>

相关文章：