Angular 2 和 AmCharts
Angular 2 and AmCharts
有人知道如何将 Amcharts 实施到 Angular2(测试版)中吗?
我试图遵循这个 的 path/pattern 但是,我用 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();
}
}
}
那么这里是template.html,来自app.component.ts
<chart>helllo from AmCharts part 2<divid="chartdiv" style="width:100%; height:600px;"></div></chart>
上面的 javascript / amcharts 代码适用于 my php site。 W
当我 运行 代码时,我没有收到任何错误。
我怀疑这是两件事之一?
我的选择器出了点问题,或者 html 得到渲染但 JavaScript 没有 "write the chart"。
chart.write("chartdiv");
最后,它没有在控制台中抛出任何错误,这真的很奇怪,因为这个 Angular2 Beta 一直在抛出错误。
我会说你的选择器是错误的,你使用元素标记 <chart></chart>
,但在指令声明中你使用 [chart]
,它选择了一个属性。这会给您留下 2 个可能的选择:
选项 1
@Directive({
selector: 'chart', //remove the straight brackets to select a tag
...
})
选项 2
<div chart>...</div> <!-- now you can use the attribute selector -->
我做了两件事。 (问题还没有解决。)
这是我在 template.html
中使用的最终代码
<div id="chartdiv" chart2 style="width:100%; height:600px;"></div>
选择器保持不变。
selector: '[chart2]'
我也运行npm start
编译TypeScript。我认为这可能有所帮助。
希望这会对某人有所帮助。
感谢 AmCharts 客户支持的帮助。
可以找到一个工作的 plunker here。
关键问题是这行代码:而不是这样做:
AmCharts.ready(function () {
createStockChart();
});
改为这样做:
if (AmCharts.isReady) {
createStockChart();
} else {
AmCharts.ready(function () {
createStockChart();
});
}
更新:
这是使用 Angular 服务获取图表数据的扩展答案。
1.安装
npm install amcharts/amcharts3-angular2 --save
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 模块并将其添加到导入中:
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
});
});
有人知道如何将 Amcharts 实施到 Angular2(测试版)中吗?
我试图遵循这个
/// <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();
}
}
}
那么这里是template.html,来自app.component.ts
<chart>helllo from AmCharts part 2<divid="chartdiv" style="width:100%; height:600px;"></div></chart>
上面的 javascript / amcharts 代码适用于 my php site。 W
当我 运行 代码时,我没有收到任何错误。
我怀疑这是两件事之一?
我的选择器出了点问题,或者 html 得到渲染但 JavaScript 没有 "write the chart"。
chart.write("chartdiv");
最后,它没有在控制台中抛出任何错误,这真的很奇怪,因为这个 Angular2 Beta 一直在抛出错误。
我会说你的选择器是错误的,你使用元素标记 <chart></chart>
,但在指令声明中你使用 [chart]
,它选择了一个属性。这会给您留下 2 个可能的选择:
选项 1
@Directive({
selector: 'chart', //remove the straight brackets to select a tag
...
})
选项 2
<div chart>...</div> <!-- now you can use the attribute selector -->
我做了两件事。 (问题还没有解决。)
这是我在 template.html
中使用的最终代码<div id="chartdiv" chart2 style="width:100%; height:600px;"></div>
选择器保持不变。
selector: '[chart2]'
我也运行
npm start
编译TypeScript。我认为这可能有所帮助。
希望这会对某人有所帮助。
感谢 AmCharts 客户支持的帮助。
可以找到一个工作的 plunker here。
关键问题是这行代码:而不是这样做:
AmCharts.ready(function () {
createStockChart();
});
改为这样做:
if (AmCharts.isReady) {
createStockChart();
} else {
AmCharts.ready(function () {
createStockChart();
});
}
更新:
这是使用 Angular 服务获取图表数据的扩展答案。
1.安装
npm install amcharts/amcharts3-angular2 --save
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 模块并将其添加到导入中:
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
});
});