2015-10-06 64 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