Google ChartsがX軸の順序を変更しないようにするにはどうすればよいですか？

Question

x軸が週番号を表すGoogle Chartを描画しようとしています。新しい年を迎えているので、軸は50, 51, 52, 1, 2, 3, ...になります。

私はきちんと自分のデータを注文するんだけど、Googleのチャートは、私の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

Googleのオブジェクト表記を使用して、値（v:）とフォーマット値（f:）を提供することを可能にする

従って、あなたは'40'

などの形式で1の値を使用することができ - >行の{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>

注：

はJSAPIローダー経由で利用可能なまま、Googleのチャートのバージョンrelease notes ...

に応じ代わりjsapi

の、ライブラリをロードするためにloader.jsの使用をお勧めしますもはや一貫して更新されていません。新しい静的ローダーを今から使用してください。

これはloadステートメントのみを変更します。上記のスニペットを参照してください。

EDIT：

ソート、又は逆ソート順序（'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>