charts - 如何防止 Google Charts 更改 x 轴顺序？

Question

我正在尝试绘制一个谷歌图表，其 x 轴代表周数。当我们跨过新的一年时，轴会移动 50, 51, 52, 1, 2, 3, ... .

我正确地对我的数据进行了排序，但 Google Charts 坚持重新排序我的 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: )

因此，您可以使用值 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 ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

这只会改变 load声明，见上面的片段...

编辑:

连续轴有更多选项可用
必须排序，或反向排序( 'number' ， 'date' 值)

但图表将尊重离散轴的原始排序顺序( 'string' 值)

参见以下 'string' 的片段值(value)观

和 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>