如何使用 Javascript 更改 DataTable 的 Google Chart API 中的格式答案

【问题标题】：How to change the format in the DataTable's Google Chart API with Javascript如何使用 Javascript 更改 DataTable 的 Google Chart API 中的格式
【发布时间】：2014-06-18 09:03:21
【问题描述】：

我想更改 DataTable 中数据的格式为了使其更灵活，图表仍然与第一个。

默认值：

['Year', 'Sales', 'Expenses'],
['2004',  1000,      400],
['2005',  1170,      460],
['2006',  660,       1120],
['2007',  1030,      540]

必须是：

['Year', '2004', '2005', '2006', '2007'],
['Sales', 1000, 1170, 660, 1030],
['Expenses', 400 ,460, 1120, 540]

Demo

HTML：

<div id="chart_div" style="width: 450px; height: 300px;"></div>

Javascript：

google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

【问题讨论】：

标签： javascript charts google-visualization

【解决方案1】：

您必须转置数组，如：http://jsfiddle.net/krzysztof_safjanowski/Mw398/1/

var data = google.visualization.arrayToDataTable(transposeArray([
    ['Year', '2004', '2005', '2006', '2007'],
    ['Sales', 1000, 1170, 660, 1030],
    ['Expenses', 400, 460, 1120, 540]
]));

function transposeArray(array) {
  return array[0].map(function (col, i) {
    return array.map(function (row) {
      return row[i];
    });
  });
}

在将数据传递给arrayToDataTable 之前，您需要准备好谷歌图表可以理解的格式。

转置 - http://en.wikipedia.org/wiki/Transpose

方法map – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

【讨论】：

非常感谢。我现在明白了:-)