Google 可视化图表未显示第一列

我在使用 Google Visualization API 时遇到问题，图表中的某些数据未显示。该图表相当简单，有 4 列和两行。

http://savedbythegoog.appspot.com/?id=ae0853b788af3292b5547a5b7f1224aed76abfff http://savedbythegoog.appspot.com/?id=ae0853b788af3292b5547a5b7f1224aed76abfff

 function drawVisualization() {
      // Create and populate the data table.

      var data_table = new google.visualization.DataTable();
      data_table.addColumn({"type": "date","label": "Date"});
      data_table.addColumn({"type": "number","label": "A"});
      data_table.addColumn({"type": "number","label": "B"});
      data_table.addColumn({"type": "number","label": "C"});

      data_table.addRow([{v: new Date(2013, 5, 26)}, {v: 1}, {v: 0}, {v: 0}]);
      data_table.addRow([{v: new Date(2013, 5, 27)}, {v: 2}, {v: 1}, {v: 0.5}]);

      var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
      chart.draw(data_table, {
          legend: "bottom"
      });

  }

生成后，图表第一行 (2013-5-26) 不显示任何内容，第二行仅显示 2 和 1 的值（省略 0.5）。

我怀疑这可能类似于Google 柱形图缺少数据 https://stackoverflow.com/questions/16648365/google-column-chart-missing-data

有人有什么想法吗？

所以看来谷歌已经提供了一些解决方案......

https://developers.google.com/chart/interactive/docs/customizing_axes#Discrete_vs_Continously https://developers.google.com/chart/interactive/docs/customizing_axes#Discrete_vs_Continuous

帮助！我的图表变得不稳定！

我的域轴类型不是字符串，但我仍然想要一个离散域轴：

这让你非常沮丧，那么你可以做其中之一 下列的：

1. 将第一个数据表列的类型更改为字符串。
2. 使用 DataView 作为适配器来转换第一个数据表的类型 列到字符串：

所以上图的解决方案是添加：

//Create a DataView from the data_table
var dataView = new google.visualization.DataView(data_table);

//Set the first column of the dataview to format as a string, and return the other columns [1, 2 and 3]
dataView.setColumns([{calc: function(data, row) { return data.getFormattedValue(row, 0); }, type:'string'}, 1, 2, 3]);

所以整个函数就变成了：

function drawVisualization() {
var data_table = new google.visualization.DataTable();
  data_table.addColumn({"type": "date","label": "Date"});
  data_table.addColumn({"type": "number","label": "A"});
  data_table.addColumn({"type": "number","label": "B"});
  data_table.addColumn({"type": "number","label": "C"});

  data_table.addRow([{v: new Date(2013, 5, 26)}, {v: 1}, {v: 0}, {v: 0}]);
  data_table.addRow([{v: new Date(2013, 5, 27)}, {v: 2}, {v: 1}, {v: 0.5}]);

  //Create a DataView from the data_table
  var dataView = new google.visualization.DataView(data_table);

  //Set the first column of the dataview to format as a string, and return the other columns [1, 2 and 3]
  dataView.setColumns([{calc: function(data, row) { return data.getFormattedValue(row, 0); }, type:'string'}, 1, 2, 3]);
  var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
  chart.draw(dataView, {
      legend: "bottom"
  });
}