Angular2 HTTP Providers，从 JSON 获取 Amcharts 的字符串

Question

这是一个略显凌乱的问题。虽然看起来我在问关于 amCharts 的问题，但我真的只是想弄清楚如何从 HTTP 请求中提取一个数组，然后将其转换为一个变量并将其放入 3 方 javacript。

一切从这里开始，with this question，AmCharts 支持人员热情地回答了这个问题。

从plnker 可以看出。图表正在工作。图表的数据是硬编码的：

`var chartData = [{date: new Date(2015,2,31,0,0,0,       0),value:372.10,volume:2506100},{date: new Date(2015,3,1,0, 0, 0, 0),value:370.26,volume:2458100},{date: new Date(2015,3,2,0, 0, 0, 0),value:372.25,volume:1875300},{date: new Date(2015,3,6,0, 0, 0, 0),value:377.04,volume:3050700}];`

所以我们知道 amCharts 部分有效。知道问题出在哪里将硬编码数据更改为 json 请求，以便它可以是动态的。我不认为这应该是非常困难的，但对于我的生活，我似乎无法弄清楚。

第一个问题是我在 .map、.subscribe 或 .observable 上找不到任何文档。

所以这里有一个plunker，看起来与第一个非常相似，但是它有一个 http 提供程序和可注入的。它坏了，因为我不知道如何从服务中提取数据并将其放入 AmCharts 函数中。我知道如何从 http 提供程序中提取数据并使用 NgFor 在模板中显示它，但我不需要在模板（视图）中使用它。如您所见，我使用 getTitle() 函数成功地从服务传输数据。

    this.chart_data =_dataService.getEntries();
    console.log('Does this work? '+this.chart_data);

    this.title = _dataService.getTitle();
    console.log('This works '+this.title);

    // Transfer the http request to chartData to it can go into Amcharts
    // I think this should be string?
    var chartData = this.chart_data;

所以最终的问题是为什么我不能使用服务来获取数据，将数据转换为变量并将其放入图表中。我怀疑 options.json 中可能有一些线索，因为 json 格式可能不正确？我是否声明了正确的变量？最后，它可能与observable / map有关？

Answer 1

这里有一些东西。首先这是一门课，保持这种状态。我的意思是把你在构造函数中的函数移出它，并使它们成为你的类的方法。

第二，你有这段代码

this.chart_data =_dataService.getEntries().subscribe((data) => {
    this.chart_data = data; 
});

subscribe 内部发生的事情是异步运行的，因此this.chart_data 不会存在。您在这里所做的是分配对象本身，在这种情况下，subscribe 返回的是什么，而不是 http 响应。所以你可以简单地将你的库初始化放在订阅里面，这样就可以了。

_dataService.getEntries().subscribe((data) => {

      if (AmCharts.isReady) {
        this.createStockChart(data);
      } else {
        AmCharts.ready(() => this.createStockChart(data));
      }
});

现在，你终于有了一件有趣的事情。在您的 JSON 中，您的 date 属性包含一个带有新 Date 的字符串，它只是一个字符串，并且您的库需要（对于我测试的）一个 Date 对象，因此您需要解析它。这里的问题是默认情况下您无法解析或字符串化 Date 对象。我们需要将该字符串转换为 Date 对象。

看看这个 sn-p 代码，我使用了 eval（请不要自己做，只是为了显示目的！）

let chartData = [];
   for(let i = 0; i < data[0].chart_data.length; i++) {
       chartData.push({
          // FOR SHOWING PURPOSES ONLY, DON'T TRY IT AT HOME
          // This will parse the string to an actual Date object
          date : eval(data[0].chart_data[i].date);
          value : data[0].chart_data[i].value;
          volume : data[0].chart_data[i].volume;
   });
 }

我正在做的是重建数组，以便值符合要求。

对于后一种情况，您必须使用 (new Date('YOUR DATE')).toJSON() 构造您的 json，并且您可以使用 new Date(yourJSON) 将其解析为 Date 对象（参考 Date.prototype.toJSON() - MDN）。这是您应该在服务器端解决的问题。假设你已经解决了这个问题，你的代码应该如下所示

// The date property in your json file should be stringified using new Date(...).toJSON()
date : new Date(data[0].chart_data[i].date);

这是一个带有邪恶评估的plnkr。请记住，您必须将日期作为 JSON 从服务器发送到您的客户端，并且在您的客户端中，您必须将其解析为日期。

希望对你有所帮助。

Answer 2

如果DataService的getEntries方法返回一个observable，你需要订阅它才能获取数据：

_dataService.getEntries().subscribe(
  (data) => {
    this.chart_data = data;
  });

不要忘记从 HTTP 调用异步接收数据。 http.get 方法返回一个 observable（类似于 promise 的东西）将在未来接收数据。但是当getEntries 方法返回时，数据还不存在......

getTitle 是一种同步方法，因此您可以按照自己的方式调用它。