如何防止谷歌圖表改變X軸順序？

Question

我想繪製一個Google Chart，其X軸代表週數。當我們跨過一個新的一年時，軸線將會變爲50, 51, 52, 1, 2, 3, ...。

我正確排序我的數據，但谷歌圖表堅持重新排序我的X軸，我結束了一個怪異的圖形：

var chartData = [ 
 
    ["Week","Revenue"], 
 
    [40,227], 
 
    [41,317], 
 
    [42,320], 
 
    [43,482], 
 
    [44,418], 
 
    [45,345], 
 
    [46,313], 
 
    [47,316], 
 
    [48,380], 
 
    [49,467], 
 
    [50,349], 
 
    [51,256], 
 
    [52,393], 
 
    [1,276], 
 
    [2,349], 
 
    [3,312] 
 
]; 
 

 
google.load("visualization", "1", { 
 
packages:["corechart"], 
 
callback: function() { 
 
    var div = document.getElementById('chart'); 
 
    var chartDataTable = google.visualization.arrayToDataTable(chartData); 
 
    var chart = new google.visualization['LineChart'](div); 
 
    chart.draw(chartDataTable); 
 
}});

<div id="chart" style="height: 400px;">test</div> 
 
<script src="//www.google.com/jsapi"></script>

如何防止它從重新排序我的數據？

Answer 1

谷歌的對象表示法允許你提供的值（v:）和格式化值（f:）

因此，可以使用的1一個值與'40'

例如一個格式 - >{v: 1, f: '40'}

連續 - >[{v: 1, f: '40'},227]

下列工作段使用對象表示法重新格式化爲x軸的值，
並重新使用這些值用於x軸標籤（hAxis.ticks）

var chartData = [ 
 
    ["Week","Revenue"], 
 
    [40,227], 
 
    [41,317], 
 
    [42,320], 
 
    [43,482], 
 
    [44,418], 
 
    [45,345], 
 
    [46,313], 
 
    [47,316], 
 
    [48,380], 
 
    [49,467], 
 
    [50,349], 
 
    [51,256], 
 
    [52,393], 
 
    [1,276], 
 
    [2,349], 
 
    [3,312] 
 
]; 
 

 
var hAxisTicks = []; 
 
chartData.forEach(function (row, index) { 
 
    if (index === 0) { 
 
    return; 
 
    } 
 
    row[0] = { 
 
    v: index, 
 
    f: row[0].toString() 
 
    }; 
 
    hAxisTicks.push(row[0]); 
 
}); 
 

 
google.charts.load('current', { 
 
    callback: function() { 
 
    var div = document.getElementById('chart'); 
 
    var chartDataTable = google.visualization.arrayToDataTable(chartData); 
 
    var chart = new google.visualization['LineChart'](div); 
 
    chart.draw(chartDataTable, { 
 
     hAxis: { 
 
     ticks: hAxisTicks 
 
     } 
 
    }); 
 
    }, 
 
    packages:['corechart'] 
 
});

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

注：

建議使用loader.js加載庫，而不是jsapi

根據release notes ...

是通過JSAPI裝載機仍然可用的谷歌圖表的版本不再一致地更新。請從現在開始使用新的gstatic loader。

這隻會改變load聲明，請參閱上面的代碼片段...

編輯：

有更多的選擇可用於連續軸
，其必須進行排序，或以相反的排序順序（'number'，'date'值）

但圖表將尊重原始排列順序爲分立軸（'string'值）

看到下面的代碼段用於'string'值

和discrete vs. continuous更多...

var chartData = [ 
 
    ["Week","Revenue"], 
 
    [40,227], 
 
    [41,317], 
 
    [42,320], 
 
    [43,482], 
 
    [44,418], 
 
    [45,345], 
 
    [46,313], 
 
    [47,316], 
 
    [48,380], 
 
    [49,467], 
 
    [50,349], 
 
    [51,256], 
 
    [52,393], 
 
    [1,276], 
 
    [2,349], 
 
    [3,312] 
 
]; 
 

 
chartData.forEach(function (row, index) { 
 
    if (index === 0) { 
 
    return; 
 
    } 
 
    row[0] = row[0].toString(); 
 
}); 
 

 
google.charts.load('current', { 
 
    callback: function() { 
 
    var div = document.getElementById('chart'); 
 
    var chartDataTable = google.visualization.arrayToDataTable(chartData); 
 
    var chart = new google.visualization['LineChart'](div); 
 
    chart.draw(chartDataTable); 
 
    }, 
 
    packages:['corechart'] 
 
});

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