函数内的访问变量 ::TypeScript & Angular2答案

【问题标题】：Access variable inside the function ::TypeScript & Angular2函数内的访问变量 ::TypeScript & Angular2
【发布时间】：2016-12-15 12:15:30
【问题描述】：

我有一个 c3.js 库，可以在我的 angular2 文件中绘制图表。绘图脚本在函数内部：

private draw() {

 let chart = c3.generate({
  bindto: '#chart',
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250, 130, 50, 20, 10, 40, 15, 25, 390],
      ['data2', 50, 20, 10, 40, 15, 25, 542, 30, 200, 100, 333, 150, 250]
    ],
    type: "line"
  }   

});

}

c3.js 库提供了将图表类型从line 更改为spline 的可能性，通过使用以下函数：

chart.transform('spline');

但不幸的是，我无法访问此 chart 变量，因为它位于 draw() 函数中。

我想把这个chart.transform('spline'); 函数放在一个按钮中，让用户动态地改变它。

~我需要一些方法让它工作，非常感谢任何帮助！

【问题讨论】：

您可以将图表添加为您使用的类的字段。
你必须使用一个服务来做，你的函数应该是一个组件的方法，你需要通过你的服务上的getter来获取变量。
@Sakuto 如果您能如此明智地用一些例子做出完整的回答，好吗？
如果你定义了一个组件变量，然后在 ngOnInit 中初始化这个变量，你应该可以在任何地方使用它。如果图表实际上是一个组件

标签： javascript angular typescript scope

【解决方案1】：

chart:any;

private draw() {

 this.chart = c3.generate({
  bindto: '#chart',
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250, 130, 50, 20, 10, 40, 15, 25, 390],
      ['data2', 50, 20, 10, 40, 15, 25, 542, 30, 200, 100, 333, 150, 250]
    ],
    type: "line"
  }   

});

你可以在任何地方使用this.chart

【讨论】：

已经试过了。收到错误：ORIGINAL EXCEPTION: Cannot read property 'transform' of undefined

【解决方案2】：

尝试初始化图表：

chart: any = {};

然后调用它

this.chart.transform('spline');

【讨论】：