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

Question

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

4

我正在尝试绘制一个谷歌图表，其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>

如何防止系统重新排列我的数据？

- BenMorel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WhiteHat · Accepted Answer

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。

根据发布说明...

通过jsapi加载的Google Charts版本不再被一致更新。请从现在开始使用新的gstatic loader。

这只改变了load语句，请参见上面的代码片段...

编辑：

对于需要排序或按相反顺序排序（'number'、'date'值）的连续轴，有更多选项可用。

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

请参见下面的代码片段以获取'string'值，并查看离散 vs. 连续获取更多信息...

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>