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

时间:2017-03-05 01:43:01

标签: javascript google-visualization number-formatting

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

我有另外一个请求我能够格式化Amount花费列但是我不知道如何格式化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);
    };

如果没有要求太多的杆,水平运行需要高约50px而不是微小的高度。这将是一个很大的帮助。

我不知道为什么它不是在我的机器中绘制js小提琴。

My Fiddle

1 个答案:

答案 0 :(得分:1)

使用pattern的{​​{1}}属性'Time Spent'

表示x轴标签 - > hAxis.format

请参阅以下工作代码段...

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>