Question

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

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

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

我希望日期数据显示在图表的底部xAxis上，然后沿着yAxis显示视图。以下是使用以下代码查看我的图表的示例（使用随机示例数据）：

这是我的图表/日期选择器/ 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'));
    });
};

我一直在尝试为此创建Reactive Vars，但我似乎尝试的所有内容都无法正常工作，有谁知道如何设置它？对Meteor来说相当新，非常感谢任何帮助。

Answer 1

这样做：

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。

Meteor：在highcharts上显示API结果数据

1 个答案: