如何將Google Charts中座標軸上的格式設置爲特定格式？

我想改變這些值的格式上軸看起來像這樣：如何將Google Charts中座標軸上的格式設置爲特定格式？

含義，我想默認分組符號更改爲空格（」「）。到目前爲止，我嘗試了不同的方法，但都沒有工作。即使是documentation也幫不了我的忙。任何人？

重要：

我想改變這些值的格式上的軸，而不是內在價值。
我不想更改谷歌圖表的語言。

來源

2017-07-05 Yulian

這是假設你知道一個典型的方法比你的用戶更好。你沒有。 [Intl]（https://developer.mozilla.org/sv-SE/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat）是最好的，因爲它將使用客戶端首選號碼格式 – Endless

@Endless謝謝，但我想說，首先，這不是我做出的決定，其次，顯然這不是對問題的回答，第三，我幾乎不相信大多數用戶（除了開發人員和極客）實際上會知道如何更改他們PC上的格式。 – Yulian

典型的用戶不會在乎改變PC上的格式，因爲它可能已經根據國家/語言設置預先配置了用戶想要的內容 – Endless

使用選項 - >ticks - 到

hAxis或vAxis

使用對象表示法爲任一軸提供自定義標籤，同時提供值v:和格式化值f:

hAxis: { 
     ticks: [ 
     {v: 0, f: '1'}, 
     {v: 1, f: '100'}, 
     {v: 2, f: '1 000'}, 
     {v: 3, f: '10 000'}, 
     {v: 4, f: '100 000'}, 
     {v: 5, f: '1 000 000'} 
     ] 
    },

請參閱以下工作片段...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'y0'], 
 
    [0, 0], 
 
    [1, 1], 
 
    [2, 2], 
 
    [3, 3], 
 
    [4, 4], 
 
    [5, 5], 
 
    [6, 6] 
 
    ]); 
 
    var options = { 
 
    hAxis: { 
 
     ticks: [ 
 
     {v: 0, f: '1'}, 
 
     {v: 1, f: '100'}, 
 
     {v: 2, f: '1 000'}, 
 
     {v: 3, f: '10 000'}, 
 
     {v: 4, f: '100 000'}, 
 
     {v: 5, f: '1 000 000'} 
 
     ] 
 
    }, 
 
    vAxis: { 
 
     ticks: [ 
 
     {v: 0, f: '1'}, 
 
     {v: 1, f: '100'}, 
 
     {v: 2, f: '1 000'}, 
 
     {v: 3, f: '10 000'}, 
 
     {v: 4, f: '100 000'}, 
 
     {v: 5, f: '1 000 000'} 
 
     ] 
 
    } 
 
    }; 
 
    var chart = new google.visualization.LineChart(document.getElementById('chart')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart"></div>

編輯

你可以使用一個數字格式化創建的數量模式

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

格式的數據表上看到提示

格式

// format tooltips 
formatLabel.format(data, 1);

還需要創建自定義標籤上看到軸

// create axis labels 
var axisTicks = []; 
var axisRange = data.getColumnRange(1); 
for (var i = axisRange.min; i <= axisRange.max; i=i+1000) { 
    axisTicks.push({ 
    v: i, 
    f: formatLabel.formatValue(i) 
    }); 
}

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

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'y0'], 
 
    [0, 1000], 
 
    [1, 2000], 
 
    [2, 3000], 
 
    [3, 6000], 
 
    [4, 10000] 
 
    ]); 
 

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

 
    // format tooltips 
 
    formatLabel.format(data, 1); 
 

 
    // create axis labels 
 
    var axisTicks = []; 
 
    var axisRange = data.getColumnRange(1); 
 
    for (var i = axisRange.min; i <= axisRange.max; i=i+1000) { 
 
    axisTicks.push({ 
 
     v: i, 
 
     f: formatLabel.formatValue(i) 
 
    }); 
 
    } 
 

 
    var options = { 
 
    height: 400, 
 
    pointSize: 4, 
 
    vAxis: { 
 
     ticks: axisTicks 
 
    } 
 
    }; 
 
    var chart = new google.visualization.LineChart(document.getElementById('chart')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart"></div>

來源

2017-07-05 14:21:06 WhiteHat

請參閱__EDIT__以獲取其他選項... – WhiteHat

如何將Google Charts中座標軸上的格式設置爲特定格式？

回答

相關問題