在 Javascript / Google 图表中处理来自 Excel 的大量输入数据的最佳方式

Question

我正在学习使用 Google 图表 API 来处理来自 UNODOC statistics 的数据。我发现 this excel 文件提供了 2000-2013 年世界各国的凶杀案数量和比率的信息。

我创建了一个区域折线图，其中 Google 图表显示了美国的凶杀案数量和比率。这是完整的 code。如您所见，我只显示来自美国的数据，并且我将数据硬编码到 var data/var data1 和 options/options1 变量中，直接进入 javascript 文件.

var data = google.visualization.arrayToDataTable([
    ['Year', 'Rate'],
        ['2000' , 5.5],  
        ['2001' , 6.6],
        ['2002' , 5.6],
        ['2003' , 5.6],
        ['2004' , 5.5],
        ['2005' , 5.6],
        ['2006' , 5.8],
        ['2007' , 5.6],
        ['2008' , 5.4],
        ['2009' , 5.0],
        ['2010' , 4.7],
        ['2011' , 4.7],
        ['2012' , 4.7],
        ['2013' , 3.8],
    ]);

var data1 = google.visualization.arrayToDataTable([
        ['Year', 'Homocide count'],
            ['2000' , 15586],
            ['2001' , 19033],
            ['2002' , 16229],
            ['2003' , 16528],
            ['2004' , 16148],
            ['2005' , 16740],
            ['2006' , 17309],
            ['2007' , 17128],
            ['2008' , 16465],
            ['2009' , 15399],
            ['2010' , 14722],
            ['2011' , 14661],
            ['2012' , 14827],
            ['2013' , 12253],
      ]);

首先，我认为这不太好，特别是如果我想输入 Excel 文件中包含的所有国家/地区的数据。

如果不将所有数据从 .xls 文件手动复制粘贴到 javascript 代码中，加载所有数据的最佳方法是什么？

Answer 1

你能先把xls转成csv吗？如果是这样，我会倾向于使用 d3.csv() 函数。

d3.csv('file.csv', function(murderData){
    chart here using murderData
})

加载您的 chart/map 作为回调。 M Bostock 有 the medicine

EG CSV -

Year,Make,Model,Length
1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38

返回

[
  {"Year": "1997", "Make": "Ford", "Model": "E350", "Length": "2.34"},
  {"Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": "2.38"}
]

在 Javascript / Google 图表中处理来自 Excel 的大量输入数据的最佳方式

Best way to handle large input data from Excel in Javascript / Google Charts

javascript

charts

visualization

data-visualization

google-visualization