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

Question

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

一切从这里开始，，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

如果 DataService returns 的 getEntries 方法是一个可观察对象，您需要订阅它来获取数据：

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

不要忘记从 HTTP 调用异步接收数据。 http.get 方法 returns 可观察对象（"similar" 承诺）将在未来接收数据。但是当 getEntries 方法 returns 数据还没有...

getTitle 是一种同步方法，因此您可以按原样调用它。

Answer 2

你这里有一些东西。首先这是一个 class，保持原样。我的意思是将构造函数中的函数移出它，并使它们成为 class.

的方法

第二，你有这段代码

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

subscribe 内部发生的事情是异步运行的，因此 this.chart_data 不会存在于它之外。您在这里所做的是分配对象本身，在本例中是 subscribe returns，而不是 http 响应。所以你可以简单地将你的库初始化放在订阅中，这样就可以了。

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

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

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

看看这段代码，我使用了 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 从服务器发送到您的客户端，并且在您的客户端中您必须将其解析为日期。

希望对您有所帮助。

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

Angular2 HTTP Providers, get a string from JSON for Amcharts

json

typescript

angular

amcharts

angular2-services