Question

这个想法是采取＆＃34;日期＆＃34;和＆＃34; homeruns＆＃34;来自.json。将匹配的日期组合在一起并添加本垒打。目前，我能够显示日期与日期相匹配，但Homeruns不会相加，只是叠加在一起。例如....日期：＆＃34; 1985＆＃34;，点击：＆＃34; 3＆＃34;，Homeruns：＆＃34; 101＆＃34;} 最终我希望所有人都将日期与组合的本垒打一起显示在条形图的高位图中（但我稍后会想到这一点）。

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

Answer 1

Homeruns最多可能因为你正在添加字符串而加起来。无论如何，我会使用更简单的解决方案：

_.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代码：

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

这里是现场演示：http://jsfiddle.net/nd4rvLvs/（以及Hits和Homeruns的示例：http://jsfiddle.net/nd4rvLvs/1/;））

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

1 个答案: