Angular 2和AmCharts

Question

有人知道如何在Angular2（BETA）中实现Amcharts吗？

我试图遵循这个问题的路径/模式，但是，我在使用charts.js时非常成功，但不幸的是，我不能为我的图表程序使用charts.js。由于似乎在Angular2 Beta中的所有内容都是未知领域，我不知道从哪里开始？我模仿了上面的charts.js示例，但没有成功，也没有错误。

/// <reference path="../DefinitelyTyped/amcharts/AmCharts.d.ts" />

有一个针对amcharts的DefinitelyTyped库（目前还没有针对plot.ly的库）。

更新： 这是指令：

/// <reference path="../DefinitelyTyped/amcharts/AmCharts.d.ts" />



import {Directive, ElementRef, Renderer, Input} from 'angular2/core';

@Directive({
selector: '[chart]',
})

export class amChartDirective  {
          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}];
          var chart;
          AmCharts.ready(function () {
              createStockChart();
          });
          function createStockChart() {
              chart = new AmCharts.AmStockChart();
              chart.dataDateFormat = "M-D-YY";
              chart.pathToImages = "http://www.strategic-options.com/trade/3_party/amcharts/images/";
              var dataSet = new AmCharts.DataSet();
              dataSet.dataProvider = chartData;
              dataSet.fieldMappings = [{
                      fromField: "value",
                      toField: "value"
                  }, {
                      fromField: "volume",
                      toField: "volume"
                  }];
              dataSet.categoryField = "date";
              chart.dataSets = [dataSet];
              // PANELS ///////////////////////////////////////////
              // first stock panel
              var stockPanel1 = new AmCharts.StockPanel();
              stockPanel1.showCategoryAxis = false;
              stockPanel1.title = "Value";
              stockPanel1.percentHeight = 70;
              // graph of first stock panel
              var graph1 = new AmCharts.StockGraph();
              graph1.valueField = "value";
              stockPanel1.addStockGraph(graph1);
              // create stock legend
              var stockLegend1 = new AmCharts.StockLegend();
              stockLegend1.valueTextRegular = " ";
              stockLegend1.markerType = "none";
              stockPanel1.stockLegend = stockLegend1;
              // second stock panel
              var stockPanel2 = new AmCharts.StockPanel();
              stockPanel2.title = "Volume";
              stockPanel2.percentHeight = 30;
              var graph2 = new AmCharts.StockGraph();
              graph2.valueField = "volume";
              graph2.type = "column";
              graph2.fillAlphas = 1;
              stockPanel2.addStockGraph(graph2);
              // create stock legend
              var stockLegend2 = new AmCharts.StockLegend();
              stockLegend2.valueTextRegular = " ";
              stockLegend2.markerType = "none";
              stockPanel2.stockLegend = stockLegend2;
              // set panels to the chart
              chart.panels = [stockPanel1, stockPanel2];

              // PERIOD SELECTOR ///////////////////////////////////
              var periodSelector = new AmCharts.PeriodSelector();
              periodSelector.periods = [{

                      period: "DD",
                      count: 10,
                      label: "10 days"
                  }, {
                      period: "MM",
                      count: 1,
                      label: "1 month"
                  }, {
                      period: "YYYY",
                      count: 1,
                      label: "1 year"
                  }, {

                      period: "YTD",
                      label: "YTD"
                  }, {
                      selected: true,
                      period: "MAX",
                      label: "MAX"
                  }];
              periodSelector.selectFromStart = true;
              chart.periodSelector = periodSelector;


              var panelsSettings = new AmCharts.PanelsSettings();
              panelsSettings.usePrefixes = true;
              chart.panelsSettings = panelsSettings;

              //Cursor Settings
              var cursorSettings = new AmCharts.ChartCursorSettings();
              cursorSettings.valueBalloonsEnabled = true;
              cursorSettings.graphBulletSize = 1;
              chart.chartCursorSettings = cursorSettings;

              // EVENTS

              var e0 = {date: new Date(2016,0,7), type: "arrowDown", backgroundColor: "#FF0707", graph: graph1, text: "Sell Short", description: "Sell Short equity here"};
              dataSet.stockEvents = [e0];
              chart.write("chartdiv");
          }
          function hideStockEvents() {
              window.console.log('woop');
              chart.hideStockEvents();
          }
          function showStockEvents() {
              window.console.log('woop');
              chart.showStockEvents();
          }
}
}

这里是来自app.component.ts的template.html模板。

<chart>helllo from AmCharts part 2<divid="chartdiv"  style="width:100%; height:600px;"></div></chart>

上面的 JavaScript / amcharts 代码在 我的 PHP 网站 上运行。当我运行代码时，没有任何错误。我怀疑有两件事情？我的选择器出了问题或者 HTML 被渲染了，但是 JavaScript 没有“写入图表”。

chart.write("chartdiv");

最后，控制台没有抛出任何错误，这真的很奇怪，因为这个 Angular2 Beta 经常会抛出错误。

- Chad

---

介意解释一下你为什么没有成功吗？你需要帮忙解决什么问题？ - Langley

PrimeNG的图表组件可以作为参考。http://www.primefaces.org/primeng/#/piechart - Cagatay Civici

Answer 1

1. 安装

npm install amcharts/amcharts3-angular2 --save

在您的HTML文件中，使用标签加载amCharts库：

2. 在您的HTML文件中，使用标签加载amCharts库：

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

3. 在你的应用模块中，导入AmChartsModule模块并将其添加到imports中：

import { AmChartsModule } from "amcharts3-angular2";

@NgModule({
  imports: [
    AmChartsModule
  ]
})
export class AppModule {}

4. 将AmChartsService注入到你的应用组件中，创建一个带有id的元素，然后使用makeChart方法创建图表：

import { AmChartsService } from "amcharts3-angular2";

@Component({
  template: `<div id="chartdiv" [style.width.%]="100" [style.height.px]="500"></div>`
})
export class AppComponent {
  private chart: any;

  constructor(private AmCharts: AmChartsService) {}

  ngOnInit() {
    this.chart = this.AmCharts.makeChart("chartdiv", {
      "type": "serial",
      "theme": "light",
      "dataProvider": []
      ...
    });
  }

  ngOnDestroy() {
    this.AmCharts.destroyChart(this.chart);
  }
}

makeChart方法的第一个参数必须与图表所在的id相同。id可以是任何你想要的值，但如果你显示多个图表，则每个图表必须具有不同的id。

当您完成图表操作后，需要调用destroyChart方法销毁图表。建议将此方法放置在ngOnDestroy方法中。

5. 如果您想在创建图表后更改图表，必须使用updateChart方法进行更改：

// This must be called when making any changes to the chart
this.AmCharts.updateChart(this.chart, () => {
  // Change whatever properties you want, add event listeners, etc.
  this.chart.dataProvider = [];

  this.chart.addListener("init", () => {
    // Do stuff after the chart is initialized
  });
});

示例项目: https://github.com/amcharts/amcharts3-angular2

- Chandrahasan

---

请提供一个 amcharts3-angular2 的工作示例，因为我不知道如何将数据传递到 dataprovider 中！ - heart hacker

Answer 2

感谢 AmCharts 的客户支持帮助。

这里可以找到一个可工作的 Plunker： 链接。

关键问题出在这行代码上：与其这样写：

AmCharts.ready(function () {
    createStockChart();
});

改为这样做：

if (AmCharts.isReady) {
    createStockChart();

} else {
    AmCharts.ready(function () {
        createStockChart();
    });
}

更新:

以下是使用Angular服务获取图表数据的扩展答案。 Angular2 HTTP提供程序，从JSON中获取字符串以用于Amcharts

- Chad

---

我收到了一个 TypeScript 编译器错误，说找不到名称为 "am charts" 的东西。这是当我写下以下代码时出现的：AmCharts.ready(function () { createStockChart(); }); - AngularM

似乎不确定AM图表是什么。 - AngularM

一切都正常工作，但 TypeScript 编译器抱怨它找不到 am charts 的名称？需要导入吗？ - AngularM

我也遇到了编译器的同样问题，但我只是忽略了它。（请检查答案是否解决了你的问题，谢谢。） - Chad

对我来说，当调用chart.write函数时，似乎chartdiv尚不存在。因此，我在ngAfterViewInit中运行逻辑。 - Aetherix

Answer 3

我认为您的选择器有误，您使用了元素标签<chart></chart>，但在指令声明中使用了[chart]，这会选择一个属性。这将留下两个可能的选项：

选项1

@Directive({
   selector: 'chart', //remove the straight brackets to select a tag
   ...
})

选项 2

<div chart>...</div> <!-- now you can use the attribute selector -->

- Poul Kruijt

---

谢谢，我不认为这是问题所在，因为加载chart.js的方式'[chart]'与我在开始使用AmCharts之前的方式相同，并且之前它也能正常工作。此外，amcharts div标签在html中也能正常工作，但没有图表填充到div标签中。因此，我开始认为这是一个加载/写入图表的问题。该指令在html在浏览器中呈现之前就已经被执行了。 - Chad

Answer 4

我做了两件事。（问题还没有解决。）

1. 这是我在template.html中使用的最终代码：

   <div id="chartdiv" chart2 style="width:100%; height:600px;"></div>

2. 选择器保持不变。selector: '[chart2]'

3. 我还运行了npm start来编译TypeScript。我认为这可能有所帮助。

希望这能帮到某些人。

- Chad

---

我无法让它工作：我已经按照 Plunker 的指导操作，但我收到了这个错误：“找不到名称 'AmCharts'”。我也加入了库。 - AngularM

请确保您正在遵循我在 2/1/16 提交的、带有绿色勾选标记的答案。那个答案是有效的。（我刚刚检查过。）我需要删除这个答案。 - Chad