Javascript Meteor：在海图上显示API结果数据

我有一个页面，它使用GoogleAPI从用户YouTube频道获取数据（每日查看次数），然后我尝试使用（折线图）在图表上显示这些数据。用户还可以使用日期选择器，并能够更改所显示数据的时间段（例如：最近30天、上周、上月等），我希望在选择新时间段后自动更新图表

我猜最好的办法是通过，但我没有太多的运气让它工作。我的API调用似乎工作正常，所以现在我需要在图表上显示结果输出

下面是my console.log的示例屏幕截图，显示了我的api结果（在行中，每个数组是一天，0是日期，1是相应的视图计数）：

我想让日期数据显示在图表的底部X轴上，然后让视图计数显示在Y轴上。下面是我的图表的示例，代码如下（随机示例数据）：

以下是我的图表/日期选择器/api调用代码：

Template.apps.onCreated(function() {
  var self = this;
  apiStartDate = new ReactiveVar(moment().subtract(29, 'days').format('YYYY-MM-DD'));
  apiEndDate = new ReactiveVar(moment().format('YYYY-MM-DD'));
    this.autorun(function(){
    // View API Call
    GoogleApi.get('youtube/analytics/v1/reports', { params: { 'end-date': apiEndDate.get(), metrics: "views", ids: "channel==MINE", 'start-date': apiStartDate.get(), metrics: "views", dimensions: "day", sort: "-day"}}, function(error, result) {
      console.log(result);
});
  });
});

// Views Chart

Template.apps.helpers({
  viewsChart: function() {
    return {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            marginBottom: 50,
            spacingBottom: 40
        },
        title: {
            text: this.username + "'s views"
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Views'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        legend: {
            enabled: true,
            floating: true,
            verticalAlign: 'bottom',
            align:'center',
            y:40
        },
        series: [{
            name: 'Channel Name',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    };
  },
});

// Date Picker

Template.apps.rendered = function(){

    $('#reportrange span').html(moment().subtract(29, 'days').format('YYYY-MM-DD') + ' - ' + moment().format('YYYY-MM-DD'));

    $('#reportrange').daterangepicker({
        format: 'YYYY-MM-DD',
        startDate: moment().subtract(29, 'days'),
        endDate: moment(),
        showDropdowns: true,
        showWeekNumbers: true,
        timePicker: false,
        timePickerIncrement: 1,
        timePicker12Hour: true,
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        opens: 'left',
        drops: 'down',
        buttonClasses: ['btn', 'btn-sm'],
        applyClass: 'btn-primary',
        cancelClass: 'btn-default',
        separator: ' to ',
        locale: {
            applyLabel: 'Submit',
            cancelLabel: 'Cancel',
            fromLabel: 'From',
            toLabel: 'To',
            customRangeLabel: 'Custom',
            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            firstDay: 1
        }
    }, function(start, end, label) {
        // Start/End date - reactive vars to set 'start-date' & 'end-date' API Call params.
        apiStartDate.set(start.format('YYYY-MM-DD'));
        apiEndDate.set(end.format('YYYY-MM-DD'));
    });
};

---

我一直在尝试为此创建反应式变量，但我尝试的一切似乎都不起作用，有人知道我如何设置它吗？对Meteor来说是个新手，非常感谢您的帮助。

这样做：

Template.apps.onCreated(function() {
  var self = this, startDate, endDate;
  self.apiStartDate = new ReactiveVar(moment().subtract(29, 'days').format('YYYY-MM-DD'));
  self.apiEndDate = new ReactiveVar(moment().format('YYYY-MM-DD'));
    self.autorun(function(){
    // View API Call
       startDate = self.apiStartDate.get();
       endDate = self.apiEndDate.get();
       GoogleApi.get('youtube/analytics/v1/reports', { params: { 'end-date': endDate, metrics: "views", ids: "channel==MINE", 'start-date': startDate, metrics: "views", dimensions: "day", sort: "-day"}}, function(error, result) {
         console.log(result);
       });
  });
});

var self = this;
var startDate = self.apiStartDate.get();
self.apiStartDate.set(new Date());

渲染方式相同：

Template.apps.onCreated(function() {
  var self = this, startDate, endDate;
  self.apiStartDate = new ReactiveVar(moment().subtract(29, 'days').format('YYYY-MM-DD'));
  self.apiEndDate = new ReactiveVar(moment().format('YYYY-MM-DD'));
    self.autorun(function(){
    // View API Call
       startDate = self.apiStartDate.get();
       endDate = self.apiEndDate.get();
       GoogleApi.get('youtube/analytics/v1/reports', { params: { 'end-date': endDate, metrics: "views", ids: "channel==MINE", 'start-date': startDate, metrics: "views", dimensions: "day", sort: "-day"}}, function(error, result) {
         console.log(result);
       });
  });
});

var self = this;
var startDate = self.apiStartDate.get();
self.apiStartDate.set(new Date());

建议：

Template.apps.onCreated(function() {
  var self = this, startDate, endDate;
  self.apiStartDate = new ReactiveVar(moment().subtract(29, 'days').format('YYYY-MM-DD'));
  self.apiEndDate = new ReactiveVar(moment().format('YYYY-MM-DD'));
    self.autorun(function(){
    // View API Call
       startDate = self.apiStartDate.get();
       endDate = self.apiEndDate.get();
       GoogleApi.get('youtube/analytics/v1/reports', { params: { 'end-date': endDate, metrics: "views", ids: "channel==MINE", 'start-date': startDate, metrics: "views", dimensions: "day", sort: "-day"}}, function(error, result) {
         console.log(result);
       });
  });
});

var self = this;
var startDate = self.apiStartDate.get();
self.apiStartDate.set(new Date());

开始使用reactiveDict而不是reactiveVar。

签出。我认为第3点应该是你正在寻找的情况，至少是一个好的起点。