Question

目前使用Angular JS和ChartJS尝试在我的页面上放置图表。通过NodeJS中的路径请求数据，然后函数循环遍历响应中的引线，并尝试计算在每个月的每一天创建的数量。

当我在控制台上记录leadPerDay时，它会返回一个包含我所期望的所有内容的数组，但图表似乎没有正确地呈现这些点。它们全部落在底部，它告诉我它正在找到我的阵列，因为如果我拿出它，没有点。如果我手动放入数组，它会正确呈现。

public override void DidFinishLaunching (NSNotification notification)
        {
            HockeyAppLib.BITHockeyManager manager = HockeyAppLib.BITHockeyManager.SharedHockeyManager;
            manager.ConfigureWithIdentifier (new NSString (AppIdentifier));
            manager.CrashManager.SetAutoSubmitCrashReport (true);
            manager.StartManager ();
        }

Answer 1

这里的问题是在从函数实际返回数据之前呈现图表，因为您正在对端点进行异步调用。

这是当前的流程。

1）您实例化一个新图表，然后同步调用2个函数来获取标签（getDaysInMonth）和数据（getLeadsForMonth）。

2）标签功能不会对标签数据产生任何问题。然后，数据功能对端点进行异步调用以获取数据。 $http.get返回一个Promise，当它准备就绪时，您正在处理结果并构建数据数组。不幸的是，此时对getLeadsForMonth的初始调用已经返回一个空数组。

您可以使用console.log查看数据的原因可能只是一个时间问题。当浏览器执行该语句时，机会已经返回$http.get（特别是如果你在locahost上运行它），并且数据现在存在于数组中（但是图表已经呈现，因此它不会显示它）。

由于您异步获取数据，因此您有几种选择。

1）等待并在获取数据后创建图表。您可以通过在$http.get回调中移动图表创建代码来完成此操作。像这样......

function getDaysInMonth(month, year) {
  var date = new Date(year, month, 1);
  var dates = [];
  while (date.getMonth() === month) {
    var currentDate = new Date(date).toISOString().replace(/T.*/, '').split('-').reverse().join('-');
    var catDate = currentDate.replace(/-2017/g, '').replace(/-/g, '/').split('/').reverse().join('/');;
    dates.push(catDate);
    date.setDate(date.getDate() + 1);
  }
  return dates;
};

function createChart(month, year) {
  // generate the labels
  var labels = getDaysInMonth(month, year),

  // Create empty array to put leadCount in
  var leadsPerDay = new Array();

  /* Use $http.get to fetch contents*/
  $http.get('/pipedrive/getLeadsForMonth', function() {}).then(function successCallback(response) {

    // Loop through each lead and index them based on date
    var leads = response.data.data[0].deals;
    // Set date to first of the month
    var date = new Date(year, month, 1);
    // Define the month for the loop
    var currentMonth = date.getMonth();

    // Loop through the days in the month
    while (date.getMonth() === currentMonth) {
      // Save the date
      var currentDate = new Date(date).toISOString().replace(/T.*/, '');
      date.setDate(date.getDate() + 1);
      leadCount = 0;
      // Loop through each lead and search data for date
      for (i = 0; i < leads.length; i++) {
        if (leads[i].add_time.includes(currentDate)) {
          leadCount++
        }
      }
      leadsPerDay.push(leadCount);
    }

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
          label: '# new leads created',
          data: leadsPerDay,
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)'
          ],
          borderColor: [
            'rgba(255,99,132,1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      },
      maintainAspectRatio: false
    });
  }, function errorCallback(response) {
    console.log('There was a problem with your GET request.')
  });
};

createChart(currentMonth, currentYear);

2）创建一个空图表，然后使用.update()原型方法在获取数据时重新渲染图表。像这样......

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: getDaysInMonth(currentMonth, currentYear),
    datasets: [{
      label: '# new leads created',
      data: [],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  },
  maintainAspectRatio: false
});

getLeadsForMonthAndUpdateChart(myChart, currentMonth, currentYear);

function getLeadsForMonthAndUpdateChart(chart, month, year) {
  // Create empty array to put leadCount in
  var leadsPerDay = new Array();

  /* Use $http.get to fetch contents*/
  $http.get('/pipedrive/getLeadsForMonth', function() {}).then(function successCallback(response) {

    // Loop through each lead and index them based on date
    var leads = response.data.data[0].deals;
    // Set date to first of the month
    var date = new Date(year, month, 1);
    // Define the month for the loop
    var currentMonth = date.getMonth();

    // Loop through the days in the month
    while (date.getMonth() === currentMonth) {
      // Save the date
      var currentDate = new Date(date).toISOString().replace(/T.*/, '');
      date.setDate(date.getDate() + 1);
      leadCount = 0;
      // Loop through each lead and search data for date
      for (i = 0; i < leads.length; i++) {
        if (leads[i].add_time.includes(currentDate)) {
          leadCount++
        }
      }
      leadsPerDay.push(leadCount);
    }

    // add the data to the chart and re-render
    chart.data.datasets[0].data = leadsPerDay;
    chart.update();
  }, function errorCallback(response) {
    console.log('There was a problem with your GET request.')
  });
};

这是一个codepen example，演示了第二个选项（用新数据更新图表），供您查看。

Chartjs / Javascript - 我的函数没有正确返回数组，但控制台日志没问题

1 个答案: