2017-03-05 8 views
1

長めの数値を時間にフォーマットする必要があります。 長い時間が費やされた時間の列の下に表示されます。これは、今のように見えないように書式設定する必要がある時間です(6,000分、6,000時間のように見える必要があります)。長い数字をフォーマットされた時間に変換する方法

もう1つのリクエストがありましたが、ドル記号を表示するために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

+0

「なぜ私はそれがjs fiddleで描画されないのか分かりません。おそらく** TypeErrorです:google.visualizationは未定義です。** –

+0

私はFiddleも新しく、しかし、私は2つの外部JSファイルを追加するので、動作するはずです。 –

+0

jsapiとloaderを追加しましたが、 'visualization'コードをロードしていないようです...必要なときにすべてを追加しましたか? –

答えて

1

x軸ラベルの'Time Spent'

ためNumberFormatpatternプロパティを使用 - >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>

+0

ありがとう、これは完璧です! –

関連する問題