有人知道如何在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 经常会抛出错误。