谷歌表格图表:编写了一个计算函数,添加了以前点击的单元格,而不是当前的单元格

Google Table Chart: Wrote a calculation function, adds the previously click cells instead of the current cells

本文关键字:单元格 添加 函数 计算 表格 一个 谷歌      更新时间:2023-09-26

我编写了一个函数,用于计算指定单元格中的总数**(JScode中的第522行),然后取该数字并将其写入标签(第438行是该函数的起点)**。

问题是它在假设之前计算数字。我知道发生了什么情况,但我不太确定如何纠正。此外,我正试图在页面加载时运行该函数,因此它从开始计算表单元格

http://jsfiddle.net/dcw2qq/jejcwz0f/1/

  google.load('visualization', '1.0', {'packages':['controls']});


  function drawDashboard() {


    var data = new google.visualization.DataTable();
     data.addColumn('datetime', 'Date');
     data.addColumn('string', 'Description');
     data.addColumn('string', 'Category');
     data.addColumn('number', 'Amount');

     data.addRows([
            [new Date(2010, 6, 13),'CRATE AND BARREL #344', 'Merchandise',{v: 232.00, f: '$232.00'}],
          [new Date(2010, 4, 4),'HILTON HOTELS', 'Lodging', {v: 252.99, f: '$252.99'}],
          [new Date(2010, 0, 22),'LIBERTY VETERINARY RICHMOND VA', 'Other',{v: 56.23, f: '$56.23'}],
          [new Date(2010, 9, 6),'REGAL SHORT PUMP RICHMOND VA', 'Entertainment',{v: 24.50, f: '$24.50'}],
          [new Date(2010, 0, 17),'RICHMOND TIMES DISPATCH', 'Other',{v: 18.00, f: '$18.00'}],
          [new Date(2010, 7, 12),'MARRIOTT RICHMOND VA', 'Lodging',{v: 645.67, f: '$645.67'}],
          [new Date(2010, 5, 23),'HERTZ RENT-A-CAR', 'Car Rental', {v: 105.12, f: '$105.12'}],
          [new Date(2010, 10, 5),'TURKEY HILL RICHMOND VA', 'Dinning',{v: 45.03, f: '$45.03'}],
          [new Date(2010, 0, 8),'WAWAGAS', 'Gas/Automotive',{v: 56.00, f: '$56.00'}],
          [new Date(2010, 6, 10),'JIFFYLUBE', 'Gas/Automotive',{v: 109.78, f: '$109.78'}],
          [new Date(2010, 6, 22),'DELTA AIRLINES', 'Airfare',{v: 876.23, f: '$876.23'}],
          [new Date(2010, 7, 25),'MUAY THAI', 'Dinning', {v: 19.34, f: '$19.34'}],
          [new Date(2010, 2, 22),'JCPENNY', 'Merchandise',{v: 102.22, f: '$102.22'}],
          [new Date(2010, 1, 25),'BASS PRO SHOP', 'Merchandise',{v: 309.76, f: '$309.76'}],
          [new Date(2010, 3, 4),'CVS PHARMACY', 'Merchandise', {v: 3.21, f: '$3.21'}],
          [new Date(2010, 10, 13),'WILD WINGS CAFE', 'Dinning',{v: 25.87, f: '$25.87'}],
          [new Date(2010, 6, 22),'DELTA AIRLINES', 'Airfare',{v: 923.55, f: '$923.55'}],
          [new Date(2010, 7, 24),'CAFE MENCINA', 'Merchandise',{v: 98.56, f: '$98.56'}],
          [new Date(2010, 3, 27),'WAWA GAS', 'Gas/Automotive', {v: 57.00, f: '$57.00'}],
          [new Date(2010, 9, 16),'RITZ CARLTON', 'Lodging',{v: 456.12, f: '$456.12'}],
          [new Date(2011, 6, 16),'CRATE AND BARREL #644', 'Merchandise',{v: 292.00, f: '$292.00'}],
          [new Date(2011, 8, 8),'HILTON HOTELS', 'Lodging', {v: 252.99, f: '$252.99'}],
          [new Date(2011, 0, 22),'LIBERTY VETERINARY RICHMOND VA', 'Other',{v: 56.26, f: '$56.26'}],
          [new Date(2011, 9, 6),'REGAL SHORT PUMP RICHMOND VA', 'Entertainment',{v: 28.50, f: '$28.50'}],
          [new Date(2011, 0, 17),'RICHMOND TIMES DISPATCH', 'Other',{v: 18.00, f: '$18.00'}],
          [new Date(2011, 7, 12),'MARRIOTT RICHMOND VA', 'Lodging',{v: 685.67, f: '$685.67'}],
          [new Date(2011, 5, 26),'HERTZ RENT-A-CAR', 'Car Rental', {v: 105.12, f: '$105.12'}],
          [new Date(2011, 10, 5),'TURKEY HILL RICHMOND VA', 'Dinning',{v: 85.06, f: '$85.06'}],
          [new Date(2011, 0, 8),'WAWAGAS', 'Gas/Automotive',{v: 56.00, f: '$56.00'}],
          [new Date(2011, 6, 10),'JIFFYLUBE', 'Gas/Automotive',{v: 109.78, f: '$109.78'}],
          [new Date(2011, 6, 22),'DELTA AIRLINES', 'Airfare',{v: 876.26, f: '$876.26'}],
          [new Date(2011, 7, 25),'MUAY THAI', 'Dinning', {v: 19.68, f: '$19.68'}],
          [new Date(2011, 2, 22),'JCPENNY', 'Merchandise',{v: 102.22, f: '$102.22'}],
          [new Date(2011, 1, 25),'BASS PRO SHOP', 'Merchandise',{v: 609.76, f: '$609.76'}],
          [new Date(2011, 6, 8),'CVS PHARMACY', 'Merchandise', {v: 6.21, f: '$6.21'}],
          [new Date(2011, 10, 16),'WILD WINGS CAFE', 'Dinning',{v: 25.87, f: '$25.87'}],
          [new Date(2011, 6, 22),'DELTA AIRLINES', 'Airfare',{v: 926.55, f: '$926.55'}],
          [new Date(2011, 7, 28),'CAFE MENCINA', 'Merchandise',{v: 98.56, f: '$98.56'}],
          [new Date(2011, 6, 27),'WAWA GAS', 'Gas/Automotive', {v: 57.00, f: '$57.00'}],
          [new Date(2011, 9, 16),'RITZ CARLTON', 'Lodging',{v: 856.12, f: '$856.12'}],
          [new Date(2012, 2, 12),'CRATE AND BARREL #244', 'Merchandise',{v: 292.00, f: '$292.00'}],
          [new Date(2012, 8, 8),'HILTON HOTELS', 'Lodging', {v: 252.99, f: '$252.99'}],
          [new Date(2012, 0, 22),'LIBERTY VETERINARY RICHMOND VA', 'Other',{v: 52.22, f: '$52.22'}],
          [new Date(2012, 9, 2),'REGAL SHORT PUMP RICHMOND VA', 'Entertainment',{v: 28.50, f: '$28.50'}],
          [new Date(2012, 0, 17),'RICHMOND TIMES DISPATCH', 'Other',{v: 18.00, f: '$18.00'}],
          [new Date(2012, 7, 12),'MARRIOTT RICHMOND VA', 'Lodging',{v: 285.27, f: '$285.27'}],
          [new Date(2012, 5, 22),'HERTZ RENT-A-CAR', 'Car Rental', {v: 105.12, f: '$105.12'}],
          [new Date(2012, 10, 5),'TURKEY HILL RICHMOND VA', 'Dinning',{v: 85.02, f: '$85.02'}],
          [new Date(2012, 0, 8),'WAWAGAS', 'Gas/Automotive',{v: 52.00, f: '$52.00'}],
          [new Date(2012, 2, 10),'JIFFYLUBE', 'Gas/Automotive',{v: 109.78, f: '$109.78'}],
          [new Date(2012, 2, 22),'DELTA AIRLINES', 'Airfare',{v: 872.22, f: '$872.22'}],
          [new Date(2012, 7, 25),'MUAY THAI', 'Dinning', {v: 19.28, f: '$19.28'}],
          [new Date(2012, 2, 22),'JCPENNY', 'Merchandise',{v: 102.22, f: '$102.22'}],
          [new Date(2012, 1, 25),'BASS PRO SHOP', 'Merchandise',{v: 209.72, f: '$209.72'}],
          [new Date(2012, 2, 8),'CVS PHARMACY', 'Merchandise', {v: 2.21, f: '$2.21'}],
          [new Date(2012, 10, 12),'WILD WINGS CAFE', 'Dinning',{v: 25.87, f: '$25.87'}],
          [new Date(2012, 2, 22),'DELTA AIRLINES', 'Airfare',{v: 922.55, f: '$922.55'}],
          [new Date(2012, 7, 28),'CAFE MENCINA', 'Merchandise',{v: 98.52, f: '$98.52'}],
          [new Date(2012, 2, 27),'WAWA GAS', 'Gas/Automotive', {v: 57.00, f: '$57.00'}],
          [new Date(2012, 9, 12),'RITZ CARLTON', 'Lodging',{v: 852.12, f: '$852.12'}],
          [new Date(2013, 2, 12),'CRATE AND BARREL #244', 'Merchandise',{v: 222.00, f: '$222.00'}],
          [new Date(2013, 8, 8),'HILTON HOTELS', 'Lodging', {v: 252.22, f: '$252.22'}],
          [new Date(2013, 0, 22),'LIBERTY VETERINARY RICHMOND VA', 'Other',{v: 52.22, f: '$52.22'}],
          [new Date(2013, 2, 2),'REGAL SHORT PUMP RICHMOND VA', 'Entertainment',{v: 28.50, f: '$28.50'}],
          [new Date(2013, 0, 17),'RICHMOND TIMES DISPATCH', 'Other',{v: 18.00, f: '$18.00'}],
          [new Date(2013, 7, 12),'MARRIOTT RICHMOND VA', 'Lodging',{v: 285.27, f: '$285.27'}],
          [new Date(2013, 5, 22),'HERTZ RENT-A-CAR', 'Car Rental', {v: 105.12, f: '$105.12'}],
          [new Date(2013, 10, 5),'TURKEY HILL RICHMOND VA', 'Dinning',{v: 85.02, f: '$85.02'}],
          [new Date(2013, 0, 8),'WAWAGAS', 'Gas/Automotive',{v: 52.00, f: '$52.00'}],
          [new Date(2013, 2, 10),'JIFFYLUBE', 'Gas/Automotive',{v: 102.78, f: '$102.78'}],
          [new Date(2013, 2, 22),'DELTA AIRLINES', 'Airfare',{v: 872.22, f: '$872.22'}],
          [new Date(2013, 7, 25),'MUAY THAI', 'Dinning', {v: 12.28, f: '$12.28'}],
          [new Date(2013, 2, 22),'JCPENNY', 'Merchandise',{v: 102.22, f: '$102.22'}],
          [new Date(2013, 1, 25),'BASS PRO SHOP', 'Merchandise',{v: 202.72, f: '$202.72'}],
          [new Date(2013, 2, 8),'CVS PHARMACY', 'Merchandise', {v: 2.21, f: '$2.21'}],
          [new Date(2013, 10, 12),'WILD WINGS CAFE', 'Dinning',{v: 25.87, f: '$25.87'}],
          [new Date(2013, 2, 22),'DELTA AIRLINES', 'Airfare',{v: 222.55, f: '$222.55'}],
          [new Date(2013, 7, 28),'CAFE MENCINA', 'Merchandise',{v: 28.52, f: '$28.52'}],
          [new Date(2013, 2, 27),'WAWA GAS', 'Gas/Automotive', {v: 57.00, f: '$57.00'}],
          [new Date(2013, 2, 12),'RITZ CARLTON', 'Lodging',{v: 852.12, f: '$852.12'}],
          [new Date(2014, 2, 12),'CRATE AND BARREL #244', 'Merchandise',{v: 222.00, f: '$222.00'}],
          [new Date(2014, 8, 3),'HILTON HOTELS', 'Lodging', {v: 252.22, f: '$252.22'}],
          [new Date(2014, 0, 22),'LIBERTY VETERINARY RICHMOND VA', 'Other',{v: 52.22, f: '$52.22'}],
          [new Date(2014, 2, 2),'REGAL SHORT PUMP RICHMOND VA', 'Entertainment',{v: 23.50, f: '$23.50'}],
          [new Date(2014, 0, 17),'RICHMOND TIMES DISPATCH', 'Other',{v: 13.00, f: '$13.00'}],
          [new Date(2014, 7, 12),'MARRIOTT RICHMOND VA', 'Lodging',{v: 235.27, f: '$235.27'}],
          [new Date(2014, 5, 22),'HERTZ RENT-A-CAR', 'Car Rental', {v: 105.12, f: '$105.12'}],
          [new Date(2014, 10, 5),'TURKEY HILL RICHMOND VA', 'Dinning',{v: 35.02, f: '$35.02'}],
          [new Date(2014, 0, 3),'WAWAGAS', 'Gas/Automotive',{v: 52.00, f: '$52.00'}],
          [new Date(2014, 2, 10),'JIFFYLUBE', 'Gas/Automotive',{v: 102.73, f: '$102.73'}],
          [new Date(2014, 2, 22),'DELTA AIRLINES', 'Airfare',{v: 372.22, f: '$372.22'}],
          [new Date(2014, 7, 25),'MUAY THAI', 'Dinning', {v: 12.23, f: '$12.23'}],
          [new Date(2014, 2, 22),'JCPENNY', 'Merchandise',{v: 102.22, f: '$102.22'}],
          [new Date(2014, 1, 25),'BASS PRO SHOP', 'Merchandise',{v: 202.72, f: '$202.72'}],
          [new Date(2014, 2, 3),'CVS PHARMACY', 'Merchandise', {v: 2.21, f: '$2.21'}],
          [new Date(2014, 10, 12),'WILD WINGS CAFE', 'Dinning',{v: 25.37, f: '$25.37'}],
          [new Date(2014, 2, 22),'DELTA AIRLINES', 'Airfare',{v: 222.55, f: '$222.55'}],
          [new Date(2014, 7, 23),'CAFE MENCINA', 'Merchandise',{v: 23.52, f: '$23.52'}],
          [new Date(2014, 2, 27),'WAWA GAS', 'Gas/Automotive', {v: 57.00, f: '$57.00'}],
          [new Date(2014, 2, 12),'RITZ CARLTON', 'Lodging',{v: 352.12, f: '$352.12'}]

    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0,1,{calc: mas,type: 'string',label:'Category'},3])
          function mas(view2,row) {
              var a = view2.getValue(row,2);
              return a;
          }


var dateRangeSlider = new google.visualization.ControlWrapper({
  'controlType': 'DateRangeFilter',
  'containerId': 'filter_div',
  'options': {
     'filterColumnLabel': 'Date',
     'ui': { 'format': { 'pattern': 'yyyy' } },
  }
});

var categoryPicker = new google.visualization.ControlWrapper({
  'controlType': 'CategoryFilter',
  'containerId': 'control2',
  'options': {
    'filterColumnLabel': 'Category',
    'filterColumnIndex':2,
    'ui': {
    'labelStacking': 'vertical',
      'allowTyping': false,
      'allowMultiple': false
    }
  },
 //'state': {'selectedValues': ['Gas/Automotive', 'Lodging','Merchandise']}
});

var categoryPicker2 = new google.visualization.ControlWrapper({
  'controlType': 'CategoryFilter',
  'containerId': 'control3',
  'options': {
    'filterColumnLabel': 'Category',
    'filterColumnIndex':1,
    'ui': {
    'labelStacking': 'vertical',
      'allowTyping': false,
      'allowMultiple': false
    }
  },
 //'state': {'selectedValues': ['Gas/Automotive', 'Lodging','Merchandise']}
});

    var pieChart = new google.visualization.ChartWrapper({
      'chartType': 'PieChart',
      'containerId': 'chart_div',

      'options': {
        'pieHole':.5,
        //'colors':['#639fd7','#668ba5','#66bba4','#67e6a3','#0cc4aa','#0bbde3','#0f9dd4','#2e8acc'],
        'slices': {
            0: {color: '#f1969d'},
            1: {color: '#f87f4a'},
            2: {color: '#f7b549'},
            3: {color: '#f9e848'},
            4: {color: '#79c04f'},
            5: {color: '#78b8bc'},
            6: {color: '#7c9496'},
            7: {color: '#9f7f82'},
             },
        'backgroundColor': 'transparent',
        'pieSliceBorderColor': 'transparent',
        'chartArea':{
            'left':130,
            'top':1,
            //'width':1000,
            'height':300,
            'backgroundColor':'transparent',
          },  
        //'width': 700,
        'height': 290,
        'is3D':false,
        'pieSliceText':'none',

        'legend':{
            'position': 'right',
            'alignment':'center',
            'textStyle': {
                'color': '#262626',
                'fontSize': 16
                }
            }
      }
    });

    var pieChart2 = new google.visualization.ChartWrapper({
      'chartType': 'PieChart',
      'containerId': 'chart_div2',
      'options': {
        'backgroundColor': 'transparent',
        'pieSliceBorderColor': 'transparent',
        'pieHole':.25,
        //'colors':['#639fd7','#668ba5','#66bba4','#67e6a3','#0cc4aa','#0bbde3','#0f9dd4','#2e8acc'],
        'slices': {
            0: {color: '#f1969d'},
            1: {color: '#f87f4a'},
            2: {color: '#f7b549'},
            3: {color: '#f9e848'},
            4: {color: '#79c04f'},
            5: {color: '#78b8bc'},
            6: {color: '#7c9496'},
            7: {color: '#9f7f82'},
             },
        'chartArea':{
            'left':130,
            'top':1,
            //'width':1000,
            'height':300,
            'backgroundColor':'transparent',
          },  
        //'width': 700,
        'height': 290,
        'is3D':false,
        'pieSliceText':'none',
        'legend':{
            'position': 'right',
            'alignment':'center',
            'textStyle': {
                'color': '#262626',
                'fontSize': 16
                }
            }
      }
    });     


    var tableChart = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'table_div',
      options: {
                alternatingRowStyle:false,
                cssClassNames:{
                        headerRow: 'headerRow',
                        hoverTableRow: 'hoverTableRow',
                        tableRow:'tableRow',
                        oddTableRow:'oddTableRow',
                        selectedTableRow:'selectedTableRow',
                        headerCell:'headerCell',
                        tableCell:'tableCell',
                        rowNumberCell:'rowNumberCell' 
                }

      }
    });







               function selectHandler() {
                    var dt = tableChart.getDataTable();
                      var catGroup = google.visualization.data.group(dt, [{
                                      type:'string',
                                      label:dt.getColumnLabel(2),
                                      column: 2,

                                      }],[{
                                          type: 'number',
                                          label: dt.getColumnLabel(3),
                                          column: 3,                                                
                                          aggregation: google.visualization.data.sum
                                          }
                                      ]);
                      //alert('The user selected ' + catGroup.getValue(pieChart.getChart().getSelection()[0].row,0));
                      var categoryPicked = catGroup.getValue(pieChart.getChart().getSelection()[0].row,0);
                      categoryPicker.setState({'selectedValues':[categoryPicked]});
                      $('.mainPieChart').toggleClass('hide');
                      $('.secondaryPieChart').toggleClass('hide');
                      $('span.title').text(categoryPicked);
                      categoryPicker.draw();
                }

                function updatePieCharts() {
                     var dt = tableChart.getDataTable();


                     var catGroup = google.visualization.data.group(dt, [{
                                      type:'string',
                                      label:dt.getColumnLabel(2),
                                      column: 2,

                                      }],[{
                                          type: 'number',
                                          label: dt.getColumnLabel(3),
                                          column: 3,                                                
                                          aggregation: google.visualization.data.sum
                                          }
                                      ]);
                                      pieChart.setDataTable(catGroup);
                                      formatter.format(catGroup, 1);                    
                                      pieChart.draw();
                    var catGroup2 = google.visualization.data.group(dt, [{
                                      type:'string',
                                      label:dt.getColumnLabel(1),
                                      column: 1,

                                      }],[{
                                          type: 'number',
                                          label: dt.getColumnLabel(3),
                                          column: 3,                                                
                                          aggregation: google.visualization.data.sum
                                          }
                                      ]);
                                      pieChart2.setDataTable(catGroup2);
                                      formatter.format(catGroup2, 1);                   
                                      pieChart2.draw();
                }

////////////每次单击piesice时调用函数执行此操作google.visionation.events.addListener(pieChart,'select',selectHandler);

/////////////调用TABLEChart上的FUNCTION"就绪"事件处理程序来聚合PieCharts的数据google.visionation.events.addListener(tableChart,'ready',updatePieCharts);

/////////////在标题中的Updates the Total上调用FUNCTION"ready"事件处理程序。google.visionation.events.addListener(tableChart,'ready',timeFrameHeadingNumber);

    function changeRangeOf(e,days) {
        //setActiveState();
        var timeframe = e
        $('.chart-nav button.btn').removeClass('active');
        $('#changeRange'+timeframe).addClass('active');

        //Header Updater
        var timeframeHeading = $('#changeRange'+timeframe).html();
        $('.dateRangeLabel').text(timeframeHeading);

        //setPieChart Range();
        var today = new Date();
        today.setHours(0, 0, 0, 0);
        const monthLength = (24*(days)) * 60 * 60 * 1000;       
        var ago = new Date(today.getTime() - monthLength);
        //Redraw Pie Chart();           
        dateRangeSlider.setState({lowValue: ago, highValue: today});
        dateRangeSlider.draw();
        $('.totalHeadingNumber').text(timeFrameHeadingNumber());


    }

    function timeFrameHeadingNumber(){
        var totalAmt = 0;
        $('td.google-visualization-table-td-number').each(function() {
                                var actualValue = Number($(this).text().replace('$',''));   
                                totalAmt = totalAmt + actualValue;                              

                                }); 
        return '$'+totalAmt.toFixed(2);
    }

     $("#changeRangeMo").click(function(){changeRangeOf('Mo',30)});
     $("#changeRange3Mo").click(function(){changeRangeOf('3Mo',90)});
     $("#changeRange6Mo").click(function(){changeRangeOf('6Mo',180)}); 
     $("#changeRange12Mo").click(function(){changeRangeOf('12Mo',365)}); 
     $("#changeRange24Mo").click(function(){changeRangeOf('24Mo',730)}); 
     $("#changeRange36Mo").click(function(){changeRangeOf('36Mo',1095)}); 
     $("#changeRange48Mo").click(function(){changeRangeOf('48Mo',1460)});
     $("#changeRangeYTD").click(function(){changeRangeOf('YTD',9999)})
     // Create a dashboard.
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
    // Establish dependencies, declaring that 'filter' drives 'pieChart',
    // so that the pie chart will only display entries that are let through
    // given the chosen slider range.
    dashboard.bind([dateRangeSlider,categoryPicker,categoryPicker2],tableChart);


        var formatter = new google.visualization.NumberFormat(
                          {prefix: '$',fractionDigits: 2});
                            formatter.format(data,3); // Apply formatter to second column
        var formatter_short = new google.visualization.DateFormat({pattern: " MM/dd/yyyy"});
        formatter_short.format(data, 0);

    // Draw the dashboard using the Data View Created early in the code.
    dashboard.draw(view);
    $(document).ready(function(){   

    function timeFrameHeadingNumberOnLoad(){
        var totalAmt = 0;
        $('td.google-visualization-table-td-number').each(function() {
                                var actualValue = Number($(this).text().replace('$',''));   
                                totalAmt = totalAmt + actualValue;                              

                                }); 
        return '$'+totalAmt.toFixed(2);
    }

});

  }
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawDashboard);

感谢您的时间和努力。

这种方法有几个问题。首先,您将在谷歌加载程序的回调中创建一个文档就绪事件处理程序,该事件处理程序可能会在文档就绪触发后被调用,因此就绪事件处理器永远不会触发。其次,您在启动重绘后立即从HTML中计算值,因此表的内容尚未更改(或正在删除),因为重绘是异步的。您需要为表使用一个"就绪"事件处理程序来从表中获取正确的值,但幸运的是,您根本不需要从HTML中获取这些数据。有一个简单得多的解决方案:

function setTimeFrameHeading () {
    var dt = tableChart.getDataTable();
    var totalAmt = 0;
    for (var i = 0; i < dt.getNumberOfRows(); i++) {
        totalAmt += dt.getValue(i, 3);
    }
    var totalStr = formatter.formatValue(totalAmt);
    $('.totalHeadingNumber').text(totalStr);
}

将其用作表的"就绪"事件的回调:

google.visualization.events.addListener(tableChart, 'ready', setTimeFrameHeading);

并去掉所有其他涉及计算总数的代码。

http://jsfiddle.net/asgallant/jejcwz0f/2/