2017-08-17 63 views
1

我alreayd這裏檢查:
https://groups.google.com/forum/#!topic/google-visualization-api/4qCeUgE-OmU
https://developers.google.com/chart/interactive/docs/querylanguage#Format
https://developers.google.com/chart/interactive/docs/reference#numberformatter帶格式的數字。作爲千個分隔符,沒有小數

我要顯示在繪製與谷歌圖表沒有小數的圖表x軸的數量和作爲千位分隔符的.

var options = { 
    hAxis: { 
     title: 'Month' 
    }, 
    vAxis: { 
     title: 'Price (€)', format: '#.###' 
    } 
}; 

那麼3200應該顯示爲3.200

我已經試過了format變量:

#.# 
#.### 
# 

回答

1

因爲format選項將不會在這種情況下工作,
可以提供您自己的ticksvAxis ...

使用對象符號來表示每一跳

{ 
    v: value, 
    f: formattedValue 
} 

使用谷歌的NumberFormat class ...

var formatNumber = new google.visualization.NumberFormat({ 
    fractionDigits: 0, 
    groupingSymbol: '.' 
}); 

格式每個刻度使用formatValue方法

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'x'); 
 
    data.addColumn('number', 'y'); 
 
    data.addRows([ 
 
     [1, 3000], 
 
     [2, 3100], 
 
     [3, 3200], 
 
     [4, 3300], 
 
     [5, 3400], 
 
    ]); 
 

 
    var formatNumber = new google.visualization.NumberFormat({ 
 
     fractionDigits: 0, 
 
     groupingSymbol: '.' 
 
    }); 
 

 
    var columnRange = data.getColumnRange(1); 
 
    var ticks = []; 
 
    for (var i = columnRange.min; i <= columnRange.max; i=i+100) { 
 
     ticks.push({ 
 
     v: i, 
 
     f: formatNumber.formatValue(i) 
 
     }); 
 
    } 
 

 
    var options = { 
 
     hAxis: { 
 
     title: 'Month' 
 
     }, 
 
     vAxis: { 
 
     ticks: ticks, 
 
     title: 'Price (€)' 
 
     } 
 
    }; 
 

 
    var container = document.getElementById('chart'); 
 
    var chart = new google.visualization.LineChart(container); 
 
    chart.draw(data, options); 
 
    }, 
 
    packages: ['corechart'] 
 
});
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart"></div>

相關問題