Angular 2 和 AmCharts [英] Angular 2 and AmCharts
问题描述
有人知道如何将 Amcharts 实施到 Angular2 (BETA) 中吗?
Does anybody have any idea on how to implement Amcharts into Angular2 (BETA)?
我试图遵循这个问题的路径/模式，我使用 charts.js 非常成功，但不幸的是，我无法将 charts.js 用于我的图表程序.由于 Angular2 Beta 中的一切似乎都是未知领域，我不知道从哪里开始?我模仿了上面的 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" />
有一个用于 amcharts 的绝对类型库(还不是用于 plot.ly 的).
There is a DefinitelyTyped library for amcharts (not one for plot.ly yet).
更新:这是指令:
/// <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 代码适用于 我的 php 网站.
The javascript / amcharts code above works in on my php site. W
当我运行代码时，我没有收到任何错误.
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 Beta 一直在抛出错误.
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.
A working plunker can be found here.
关键问题是这行代码:而不是这样做:
The key issue was this line of code: Instead of doing this:
AmCharts.ready(function () {
createStockChart();
});
改为这样做:
if (AmCharts.isReady) {
createStockChart();
} else {
AmCharts.ready(function () {
createStockChart();
});
}
更新:
这是使用 Angular Service 获取图表数据的扩展答案.Angular2 HTTP Providers，从 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
这篇关于Angular 2 和 AmCharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
