如何防止谷歌图表改变 x 轴顺序？

Question

我正在尝试绘制 X 轴代表周数的 Google 图表。当我们跨过新的一年时，坐标轴指向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 的 object notation 允许您提供一个值 (v:) 和一个格式化的值 (f:)

因此，您可以使用1 的值和'40' 的格式

例如--> {v: 1, f: '40'}

连续 --> [{v: 1, f: '40'},227]

以下工作 sn-p 使用 对象表示法 重新格式化 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 加载程序仍然可用的 Google Charts 版本不再持续更新。请从现在开始使用新的 gstatic 加载器。

这只改变load语句，见上面的sn-p...

编辑：

连续轴有更多选项
必须排序，或以相反的排序顺序（'number'，'date' 值）

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

'string' 值参见下面的 sn-p

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