2015-10-06 83 views
1

我嘗試將格式化程序應用於數據表格列,但它被忽略。Google圖表忽略格式化器

function drawMultSeries(orderData) { 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('string', Translator.trans('company.dashboard.order_chart.days')); 
    dataTable.addColumn('number', Translator.trans('company.dashboard.orders_title')); 
    dataTable.addColumn('number', Translator.trans('company.dashboard.order_chart.expenses')); 
    dataTable.addRows(orderData); 


    var formatter = new google.visualization.NumberFormat(
     {prefix: 'test'}); 
    formatter.format(dataTable, 2); 

    var options = { 
     allowHtml: true, 
     title: Translator.trans('company.dashboard.orders_title'), 
     hAxis: { 
      title: Translator.trans('company.dashboard.order_chart.days'), 
      viewWindow: { 
       min: [7, 30, 0], 
       max: [17, 30, 0] 
      } 
     }, 
     vAxes: { 
      1: { format: 'currency' } 
     }, 
     colors: ['#8fd5ba', '#1C2C3A'], 
     series: { 
      0: { type: 'bars', targetAxisIndex: 0 }, 
      1: { type: 'area', targetAxisIndex: 1, areaOpacity: 0.07 } 
     } 
    }; 

    var chart = new google.visualization.ComboChart(
     document.getElementById('chart-orders')); 

    $('.dashboard-chart-loading').hide(); 
    $('#chart-orders').show(); 

    chart.draw(dataTable, options); 
} 

enter image description here

我希望右側軸有前綴爲任意值「測試」字符串。

回答

0

您正在格式化數據,將鼠標懸停在折線圖上的其中一個數據點上,您將看到測試

要格式化軸...

 vAxes: { 
      1: { format: 'test $#,##0.00' } 
     }, 

實施例...

google.load('visualization', '1', {packages: ['corechart']}); 
 
    google.setOnLoadCallback(drawMultSeries); 
 

 
    function drawMultSeries() { 
 
     var dataTable = new google.visualization.DataTable(); 
 
     dataTable.addColumn('string', 'days'); 
 
     dataTable.addColumn('number', 'title'); 
 
     dataTable.addColumn('number', 'expenses'); 
 
     dataTable.addRows([ 
 
      ['18/09', 1, 160], 
 
      ['22/09', 1, 250] 
 
     ]); 
 

 
     var formatter = new google.visualization.NumberFormat(
 
      {prefix: 'test'}); 
 
     formatter.format(dataTable, 2); 
 

 
     var options = { 
 
      allowHtml: true, 
 
      title: 'title', 
 
      hAxis: { 
 
       title: 'days', 
 
       viewWindow: { 
 
        min: [7, 30, 0], 
 
        max: [17, 30, 0] 
 
       }, 
 
      }, 
 
      vAxes: { 
 
       1: { format: 'test $#,##0.00' } 
 
      }, 
 
      colors: ['#8fd5ba', '#1C2C3A'], 
 
      series: { 
 
       0: { type: 'bars', targetAxisIndex: 0 }, 
 
       1: { type: 'area', targetAxisIndex: 1, areaOpacity: 0.07 } 
 
      } 
 
     }; 
 

 
     var chart = new google.visualization.ComboChart(
 
      document.getElementById('chart-orders') 
 
     ); 
 

 
     chart.draw(dataTable, options); 
 
    }
<script src="https://www.google.com/jsapi"></script> 
 
<div id="chart-orders"></div>

+0

謝謝但我用前綴 '測試',例如,實際上,我想使用自定義格式化程序而不是Google提供的「貨幣」。在你的代碼中,我猜想「formatter」變量是沒有用的。 –

+0

[formatter](https://developers.google.com/chart/interactive/docs/reference#formatters)的用途是格式化數據,並將其傳遞給'dataTable'中的圖表。軸的格式在圖表'options'中提供。在我的例子中,我用'{format:'test $#,## 0.00'}' - >格式化'vAxes',它可以被修改。我使用基於示例的貨幣。 – WhiteHat