Google可视化图表不显示第一列 [英] Google Visualization Chart Not Showing First Column

问题描述

我遇到Google可视化API的问题，因为图表中的部分数据未显示。图表非常简单，它有4列和两行。

http：//savedbythegoog.appspot。 com /？id = ae0853b788af3292b5547a5b7f1224aed76abfff


$ b

函数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}]）;

var chart = new google.visualization.ColumnChart（document.getElementById（'visualization'））;
chart.draw（data_table，{
legend：bottom
}）;




$ p
$ b

生成时，图表第一行没有显示任何内容（ 2013-5-26），并显示第二行的值为2和1（省略0.5）。

我怀疑这可能类似于 Google Column Chart缺少数据

任何人有任何想法？

解决方案

因此，Google似乎已经提供了一些解决方案...

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

帮助！

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

这会让你感到非常不安，那么你可以按照下面的方法做
中的一个：

1. 改变你的第一个类型将数据表列转换为字符串。


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

因此，上面图表的解决方案是添加：

  //从data_table 
创建一个DataView var dataView = new google.visualization.DataView（data_table）; 
 
 //将dataview的第一列设置为字符串格式，并返回其他列[1,2和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}]）; 
 
 //从data_table 
创建一个DataView var dataView = new google.visualization.DataView（data_table）; 
 
 //将dataview的第一列设置为字符串格式，并返回其他列[1,2和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
}）; 
} 
  

I am having an issue with the Google Visualization API in that some of the data in the chart is not showing. The chart is fairly simple, it has 4 columns and two rows.

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"
      });

  }

When generated, the chart shows nothing for the first row (2013-5-26), and shows only the values of 2 and 1 for the second row (omitting 0.5).

I suspect this could be similar to Google Column Chart Missing data

Does anyone have any ideas?

解决方案

So it seems Google have provided the solution somewhat...

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

Help! My chart has gone wonky!

My domain axis type is not string but I still want a discrete domain axis:

and this makes you terribly upset, then you can do one of the following:

1. Change the type of your first data table column to string.
2. Use a DataView as adapter to convert the type of your first data table column to string:

So the solution to the above chart was to add:

//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]);

So the whole function became:

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"
  });
}

这篇关于Google可视化图表不显示第一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！