Javascript 将日期与来自JSON的Homerun数据相结合

这个想法是从.json中获取“日期”和“本垒打”。将匹配的日期组合在一起，并将全垒打相加。目前，我可以显示与匹配日期组合在一起的日期，但全垒打不加起来，只是堆叠在一起。例如日期：“1985”，热门歌曲：“3”，全垒打：“101”} 最后，我想把所有的日期都与全垒打组合起来，并将其显示在条形图中的高图表中（但我会在以后找出答案）

chart.json

[{"Date": "1903", "Hits": "0", "Homeruns": "1"}, {"Date": "1903", "Hits": "1", "Homeruns": "2"}, {"Date": "1904", "Hits": "0", "Homeruns": "1"}, {"Date": "1904", "Hits": "1", "Homeruns": "2"}, {"Date": "1904", "Hits": "1", "Homeruns": "1"}, {"Date": "1905", "Hits": "1", "Homeruns": "0"}, {"Date": "1907", "Hits": "0", "Homeruns": "1"}, {"Date": "1907", "Hits": "0", "Homeruns": "1"}, {"Date": "1909", "Hits": "1", "Homeruns": "0"}, {"Date": "1909", "Hits": "0", "Homeruns": "1"}, {"Date": "1909", "Hits": "0", "Homeruns": "0"}, {"Date": "1909", "Hits": "0", "Homeruns": "1"}, {"Date": "1910", "Hits": "0", "Homeruns": "2"}, {"Date": "1910", "Hits": "0", "Homeruns": "0"}, {"Date": "1910", "Hits": "?", "Homeruns": "1"}, {"Date": "1911", "Hits": "0", "Homeruns": "1"}, {"Date": "1912", "Hits": "0", "Homeruns": "1"}, {"Date": "1914", "Hits": "0", "Homeruns": "1"}, {"Date": "1915", "Hits": "1", "Homeruns": "0"}, {"Date": "1916", "Hits": "1", "Homeruns": "0"}, {"Date": "1916", "Hits": "?", "Homeruns": "1"}, {"Date": "1917", "Hits": "1", "Homeruns": "0"}, {"Date": "1918", "Hits": "1", "Homeruns": "0"}, {"Date": "1918", "Hits": "0", "Homeruns": "1"}, {"Date": "1918", "Hits": "0", "Homeruns": "1"}, {"Date": "1918", "Hits": "0", "Homeruns": "1"}, {"Date": "1919", "Hits": "0", "Homeruns": "0"}, {"Date": "1919", "Hits": "1", "Homeruns": "0"}, {"Date": "1919", "Hits": "0", "Homeruns": "2"}, {"Date": "1920", "Hits": "1", "Homeruns": "0"}, {"Date": "1920", "Hits": "1", "Homeruns": "0"}, {"Date": "1920", "Hits": "0", "Homeruns": "0"}, {"Date": "1920", "Hits": "0", "Homeruns": "1"}, {"Date": "1920", "Hits": "1", "Homeruns": "0"}, {"Date": "1920", "Hits": "1", "Homeruns": "0"}, {"Date": "1920", "Hits": "0", "Homeruns": "1"}, {"Date": "1922", "Hits": "0", "Homeruns": "2"}, {"Date": "1922", "Hits": "0", "Homeruns": "1"}, {"Date": "1931", "Hits": "0", "Homeruns": "1"}, {"Date": "1934", "Hits": "0", "Homeruns": "1"}, {"Date": "1935", "Hits": "0", "Homeruns": "1"}, {"Date": "1936", "Hits": "0", "Homeruns": "2"}, {"Date": "1937", "Hits": "0", "Homeruns": "1"}, {"Date": "1937", "Hits": "2", "Homeruns": "0"}, {"Date": "1940", "Hits": "0", "Homeruns": "1"}, {"Date": "1942", "Hits": "0", "Homeruns": "1"}, {"Date": "1946", "Hits": "1", "Homeruns": "0"}, {"Date": "1948", "Hits": "0", "Homeruns": "1"}, {"Date": "1949", "Hits": "1", "Homeruns": "0"}, {"Date": "1949", "Hits": "0", "Homeruns": "1"}, {"Date": "1950", "Hits": "1", "Homeruns": "0"}, {"Date": "1951", "Hits": "0", "Homeruns": "1"}, {"Date": "1951", "Hits": "0", "Homeruns": "1"}, {"Date": "1951", "Hits": "0", "Homeruns": "1"}, {"Date": "1951", "Hits": "0", "Homeruns": "1"}, {"Date": "1952", "Hits": "0", "Homeruns": "1"}, {"Date": "1952", "Hits": "0", "Homeruns": "1"}, {"Date": "1954", "Hits": "0", "Homeruns": "1"}, {"Date": "1954", "Hits": "2", "Homeruns": "1"}, {"Date": "1955", "Hits": "0", "Homeruns": "1"}, {"Date": "1956", "Hits": "2", "Homeruns": "1"}]

JS

function chartPage()
        {
            $.ajax(
            {
                url: 'chart.json',
                data:
                {},
                dataType: 'json',
                success: function(data)
                {
                    var stringy = JSON.stringify(data);
                    var objects = $.parseJSON(stringy);
                    var categories = new Array();
                    var groupedObjects = new Array();
                    var i = 0;
                    _.each(objects, function(obj)
                    {
                        var existingObj;
                        if ($.inArray(obj.Date, categories) >= 0)
                        {
                            existingObj = _.find(objects, function(o)
                            {
                                return o.Date === obj.Date;
                            });
                            existingObj["Homeruns"] += obj["Homeruns"];
                        }
                        else
                        {
                            groupedObjects[i] = obj;
                            categories[i] = obj.Date;
                            i++;
                        }
                    });
                    groupedObjects = _.sortBy(groupedObjects, function(obj)
                    {
                        return obj["Homeruns"];
                    }).reverse();
                    // print results for testing
                    _.each(groupedObjects, function(obj)
                    {
                        var output = '';
                        _.each(obj, function(val, key)
                        {
                            output += key + ': ' + val + '<br>';
                        });
                        output += '<br>';
                        $('#results').append(output);
                        console.log(output);
                    });
                }
            });
        }

函数图表页（）
{
$.ajax(
{
url:'chart.json'，
数据：
{},
数据类型：“json”，
成功：功能（数据）
{
var stringy=JSON.stringify（数据）；
var objects=$.parseJSON（stringy）；
var categories=新数组（）；
var groupedObjects=新数组（）；
var i=0；
_.每个（对象、功能（obj）
{
var-existingObj；
如果（$.inArray（对象日期、类别）>=0）
{
existingObj=u2;.find（对象，函数（o）
{
返回o.日期===目标日期；
});
现有obj[“本垒打”]+=obj[“本垒打”]；
}
其他的
{
groupedObjects[i]=obj；
类别[i]=目标日期；
i++；
}
});
groupedObjects=uu.sortBy（groupedObjects，函数（obj））
{
返回obj[“本垒打”]；
}).reverse（）；
//打印测试结果
_.每个（分组对象、函数（obj）
{
var输出=“”；
_.每个（obj，功能（val，键）
{
输出+=key+'：'+val+'
'；
});
输出+='
'；
$（“#结果”）。追加（输出）；
控制台日志（输出）；
});
}
});
}

本垒打加起来最有可能是因为你在添加字符串。无论如何，我会使用更简单的解决方案：

_.each(data, function (item) {
  // if Date doesn't exist, create empty placeholder:
  if (!tempHomeruns[item.Date]) {
    tempHomeruns[item.Date] = 0;
  }
  // sum Homeruns
  tempHomeruns[item.Date] += parseInt(item.Homeruns, 10);
});

// create Highcharts required format:
_.each(tempHomeruns, function(item, key) {
  homeruns.push({
    name: key,
    y: item
  });
});

和海图代码：

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    type: 'category'
  },
  series: [{
    data: homeruns
  }]
});

---

这是一个现场演示：（和两个例子，点击率和全垒打：；）

holy cow。那容易多了。哇！非常感谢。