【问题标题】:Data column(s) for axis #0 cannot be of type string - Google Charts轴 #0 的数据列不能是字符串类型 - Google 图表
【发布时间】:2014-04-20 06:26:31
【问题描述】:

我正在尝试在 Google 图表中显示一些数据,但出现此错误:

Data column(s) for axis #0 cannot be of type string..

我有这个类的两个属性:

public class GAStatistics
{
    public string Date { get; set; }
    public string Visitors { get; set; }
}

我从这个控制器传递了这些属性的列表:

public class GAStatisticsController : Controller
{
    
     //GET: /ShopStatistics/


    public ActionResult GetData()
    {
        return Json(CreateCompaniesList(), JsonRequestBehavior.AllowGet);
    }


    private IEnumerable<GAStatistics> CreateCompaniesList()
    {
        
        List<GAStatistics> ListGaVisitors = new List<GAStatistics>();

        foreach (var row in d.Rows)
        {

            GAStatistics GaVisits = new GAStatistics(row[0], row[1]);
            ListGaVisitors.Add(GaVisits);
        }
        

        return ListGaVisitors;
   
    }

}

我从控制器传递列表到这个视图:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    
    <script type="text/javascript">
    
        google.load("visualization", "1", { packages: ["corechart"] });
        google.load("visualization", "1", { packages: ["treemap"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.get('/GAStatistics/GetData', {},
                function (data) {
                    var tdata = new google.visualization.DataTable();
    
                    tdata.addColumn('string', 'Date');
                    tdata.addColumn('string', 'Visitors');
            
    
                    for (var i = 0; i < data.length; i++) {
                        //tdata.addRow([data[i].Year, data[i].Salary, data[i].Expense]);
                        tdata.addRow([data[i].Date, data[i].Visitors]);
                    }
    
    
    
                    var options = {
                        title: "Expenses, salary For the current year"
                    };
    
                    var chart1 = new google.visualization.AreaChart(document.getElementById('chart_div1'));
    
                    chart1.draw(tdata, options);

                });
    
    
        }
    </script>

有什么想法吗?

【问题讨论】:

  • 您应该将您的 C# datetime 字符串转换为 javascript Date 类型。它应该类似于tdata.addRow([new Date(2014,1,1)...,但您应该使用自己的解析函数而不是new Date。也许通过将 C# 日期时间转换为时间戳数字,如下所述:stackoverflow.com/a/7596509/427225
  • data 长什么样子?
  • 感谢 vorrtex。那么在javascript中将字符串值转换为日期值是必要的吗?实际上,我在编写此代码时遵循了一个指南,那个人在列表中使用 Year 属性编写了类似的内容 - Year = new DateTime(2014, 3, 1).ToString("yyyy/mm/dd") asgaliant - 我不知道不知道,这就是我的全部,在网上找到了一个例子。
  • 不知道你的string Date是怎么转换的。但是,如果您的日期字符串看起来像“2011-10-20”、“1999/01/31”或“1990 年 1 月 1 日”,那么它很容易被 javascript 解析,例如 new Date("2011-10-20")。在某处放置一个调试断点并查看Date 属性的值。
  • 哦,好吧。好吧,“日期”是来自 C# 类 GAStatistics 的字符串属性,该类还包含一个名为“访客”的字符串属性。日期格式为“2014-01-24”,访客只包含“873”之类的数字。

标签: c# javascript asp.net-mvc charts google-visualization


【解决方案1】:

我已经测试了您的示例,发现主要问题是因为第二列 Visitors 应该是数字而不是字符串。

我已经替换了tdata.addColumn('number', 'Visitors'); 行中的列类型,并在循环内添加了parseInt

tdata.addColumn('date', 'Date');
tdata.addColumn('number', 'Visitors');

// sample data: var data = [{ Date: "20140124", Visitors: "873" }, { Date: "20140125", Visitors: "875" }];
for (var i = 0; i < data.length; i++) {
    var dateStr = data[i].Date.substr(0, 4) + "-" + data[i].Date.substr(4,2) + "-" + data[i].Date.substr(6,2);
    tdata.addRow([new Date(dateStr), parseInt(data[i].Visitors)]);
}

第一列Date 也可以保持为string,但我将其类型替换为date 并添加了new Date 转换。

【讨论】:

  • 不错!一个星期左右一直在试图解决这个问题。我现在在柱形图中获得了访问者的数量,但日期根本没有显示,但它显示“NaN NaN 和一个值。但是,如果将日期更改为数字并使用 pareInt,则值会像这样正确显示:@987654321 @Hers 我使用“日期”得到了什么 - 折线图:imageshack.com/i/nmq2typ 柱形图:imageshack.com/i/nr4ziop 再次感谢!
  • @KristofferAndersson 工具提示“20140126”似乎是没有连字符的日期“2014-01-26”,这就是它不起作用的原因。这可以通过添加这些连字符并使用str.substr(0, 4)+"-"+str.substr(4,2)+"-"+str.substr(6,2) 之类的代码来解决。这种方式应该会更好,因为工具提示和标签将显示更多的逻辑日期值而不是数字。
  • @KristofferAndersson 我更新了答案中的代码,你可以试试。如果它不起作用,您可以在此网站上发布一个新问题。
  • 嗨 vorrtex,很抱歉再次挖掘这个问题,但我想知道数字 (0,4)、(4,2) 和 (62) 是什么意思。完全理解这段代码会很好。谢谢
  • @KristofferAndersson 我使用了内置的javascript函数substr,您可以在这里阅读它developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 例如,参数(0,4)表示从索引0开始(str [0 ]) 并取 4 个字符 "abcdef".substr(0,4) //abcd,参数 (4,2) - 从 str[4] 开始并取 2 个字符 "abcdef".substr(4,2) // ef。您可以使用 Chrome 开发者工具(按 F12),打开控制台选项卡并测试任何 javascript 代码。
猜你喜欢
  • 2022-01-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-06-11
  • 2012-08-23
相关资源
最近更新 更多