1

这是一个略显凌乱的问题。虽然看起来我在问有关 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有关？

4

2 回答 2

2

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

其次，你有这段代码

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 对象。

看看这段代码，我使用了 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;
   });
 }

在这里，我正在做的是重建数组，使值符合要求。

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

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

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

我希望这对您有所帮助。

于 2016-03-01T03:44:05.533 回答
0

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

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

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

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

于 2016-02-26T17:41:12.523 回答