如何将一长串数字转换为格式化的小时数

Posted 2023-04-14

【中文标题】如何将一长串数字转换为格式化的小时数

【英文标题】：how to turn a long set of numbers into formatted hours

【发布时间】：2017-03-05 01:43:00

【问题描述】：

我需要将一长串数字格式化为小时。 您可以在所花费的时间列下看到很长的数字，这些小时数需要被格式化为不像现在那样，6,000，需要看起来像 6,000 小时。

我有另一个请求，我能够格式化“已用金额”列，但是我不知道如何格式化 hAxis 部分以显示美元符号。

我是 Google Charts 的新手，它学得很快。似乎文档已经散开。

  google.charts.setOnLoadCallback(drawTimeAndAmountSpentTimeLineChart);
    //Amount Completed
    function drawTimeAndAmountSpentTimeLineChart() 
        var data = google.visualization.arrayToDataTable([
            ['Web Design', 'Amount Spent', 'Time Spent'],
            ['Rendering Engines', 5000, 68000],
            ['User Management', 9000, 44000],
            ['Database', 5700, 32000],
            ['Security', 9000, 21000]
        ]);

        var options = 
            title: 'Amount Spent Per Task',
            chartArea:  width: '70%' ,
            hAxis: 
                title: 'Total Spent',
                minValue: 0,
                prefix: '$'
            ,
            vAxis: 
                title: 'Task'
            
        ;

        var formatter = new google.visualization.NumberFormat( prefix: '$' );
        formatter.format(data, 1);


        var chart = new google.visualization.BarChart(document.getElementById('timeAndAmountSpentTimeLineChart_div'));
        chart.draw(data, options);
    ;

如果不要求太多的横条，水平运行的高度需要大约 50 像素，而不是很小的高度。这将是一个很大的帮助。

我不知道为什么它不在 js fiddle 中绘制它在我的机器中绘制。

My Fiddle

【问题讨论】：

I have not idea why it is not drawing in js fiddle 也许是 TypeError: google.visualization is undefined

我也是 Fiddle 的新手；但是，我添加了两个外部 JS 文件，所以它应该可以工作。

您添加了 jsapi 和加载程序 - 但似乎没有加载 visualization 代码...您确定您添加了所需的所有内容吗？

缺少load 语句，不需要jsapi -- updated fiddle

【参考方案1】：

将NumberFormat 的pattern 属性用于'Time Spent'

对于 x 轴标签 --> hAxis.format

请参阅以下工作 sn-p...

google.charts.load('current', 
  callback: function () 
    var data = google.visualization.arrayToDataTable([
        ['Web Design', 'Amount Spent', 'Time Spent'],
        ['Rendering Engines', 5000, 68000],
        ['User Management', 9000, 44000],
        ['Database', 5700, 32000],
        ['Security', 9000, 21000]
    ]);

    var options = 
        title: 'Amount Spent Per Task',
        chartArea:  width: '70%' ,
        hAxis: 
            title: 'Total Spent',
            minValue: 0,
            format: '$#,##0'
        ,
        vAxis: 
            title: 'Task'
        
    ;

    var formatAmt = new google.visualization.NumberFormat( prefix: '$' );
    formatAmt.format(data, 1);

    var formatTime = new google.visualization.NumberFormat( pattern: '#,##0 hrs' );
    formatTime.format(data, 2);

    var chart = new google.visualization.BarChart(document.getElementById('timeAndAmountSpentTimeLineChart_div'));
    chart.draw(data, options);
  ,
  packages: ['corechart']
);

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeAndAmountSpentTimeLineChart_div"></div>

【讨论】：

非常感谢，这是完美的！