角2和AmCharts [英] Angular 2 and AmCharts
问题描述
没有任何人对如何实施Amcharts到Angular2（BETA）任何想法？
Does anybody have any idea on how to implement Amcharts into Angular2 (BETA)?
我试图遵循这一路径/模式<一个href=\"http://stackoverflow.com/questions/34653045/third-party-js-in-angular2-typescript\">question不过，我是pretty成功的charts.js，但不幸的是，我不能使用charts.js，我的制图程序。因为好像一切都在Angular2测试是未知的领域，我没有一个线索从哪里开始？我没有运气模仿上面的charts.js例如，没有错误。
I was trying to follow the path/pattern of this question however, I was pretty successful with charts.js, but unfortunately, I can't use charts.js,for my charting program. Since it seems like everything in Angular2 Beta is uncharted territory, I don't have a clue where to start? I mimicked the charts.js example above with no luck, no error.
/// <reference path="../DefinitelyTyped/amcharts/AmCharts.d.ts" />
有一个DefinitelyTyped库amcharts（而不是一个plot.ly至今）。
There is a DefinitelyTyped library for amcharts (not one for plot.ly yet).
更新：
这里是指令：
UPDATE: Here is the directive:
/// <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();
}
}
}
然后这里是template.html，从app.component.ts
Then here is the template.html, from the app.component.ts
<chart>helllo from AmCharts part 2<divid="chartdiv" style="width:100%; height:600px;"></div></chart>
中的JavaScript / amcharts code以上的作品在我的PHP网站。是W
当我运行code我没有得到任何错误。
When I run the code I don't get any errors.
我怀疑这是两件事情之一？
I suspect it's one of two things?
东西不对我的选择或HTML渲染得到，但JavaScript不写图。
Something is wrong with my Selector or the html get rendered but the JavaScript doesn't "write the chart".
chart.write("chartdiv");
最后，它不是扔在控制台中，这是非常奇怪的，因为这Angular2测试版中引发错误的所有时间任何错误。
Finally, it's not throwing any errors in the console, which is really weird because this Angular2 Beta throws errors all the time.
推荐答案
感谢客户的支持在AmCharts的帮助。
Thanks to the help of customer support at AmCharts.
一个工作plunker可以发现 rel=\"nofollow\">。
A working plunker can be found here.
问题的关键是这一行code的：不是这样做的：
The key issue was this line of code: Instead of doing this:
AmCharts.ready(function () {
createStockChart();
});
相反做到这一点：
Instead do this:
if (AmCharts.isReady) {
createStockChart();
} else {
AmCharts.ready(function () {
createStockChart();
});
}
更新：
下面是采用了棱角分明服务以获取图表的数据扩展的答案。 <一href=\"http://stackoverflow.com/questions/35658236/angular2-http-providers-get-a-string-from-json-for-amcharts\">Angular2 HTTP提供商，获得JSON字符串为Amcharts
Here is the extended answer using Angular Service to get the data for the chart. Angular2 HTTP Providers, get a string from JSON for Amcharts
这篇关于角2和AmCharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
