在任何业务线应用程序中，都需要数据可视化。通过使用用于JavaScript Angular组件的Ignite UI，只需几行代码，即可将任何类型的数据可视化快速引入Angular应用程序。
在本文中，您将学习如何在Angular应用程序中为JavaScript Angular组件DataChart添加Ignite UI。
您可以使用npm、bower或yarn在Angular应用程序中安装Ignite UI。(您可以了解使用Ignite UI的角度与不同的包管理器在这里的更多信息。)
在Angular项目中安装Ignite UI后，请执行以下步骤。
步骤1: 导入Ignite UI数据图表组件
要使用Ignite UI组件角度数据图表，您需要在应用程序模块中添加IgDataChartComponent。要做到这一点，在应用程序模块导入IgDataChartComponent如下所示。
从 “igniteui-angular2” 导入 { IgDataChartComponent}；
导入后IgDataChartComponent,您需要在模块的声明数组中传递它。您可以这样做，如下面的清单所示。
@ NgModule({声明: [AppComponent,IgDataChartComponent],// 其他模块属性})
在这里，我假设您在应用程序中有一个名为AppComponent的Angular组件，并且您将在AppComponent中添加一个数据图表。因此，在AppComponent类中，您将添加以下两个变量:
// 其余的AppComponent代码
导出类DataChartComponent实现OnInit { 私人数据: 任何； 私人选项: 任何； // 其余的AppComponent代码}
AppComponent数据属性将用于为数据图表分配数据，option属性将用于分配数据图表选项。
步骤2: 创建数据源
绑定数据图表所需的数据可以是JavaScript数组或JSON对象数组，并且可以是本地的，也可以由REST服务提供。
理想情况下，您应该创建一个函数来返回Angular服务中的数据，以便数据可以在多个组件中使用。但是，对于这篇文章，只需在组件类中创建一个名为getData的函数，在其中添加DataChart，它返回一个JSON对象数组。因此，在AppComponent类中添加一个名为getData() 的函数，如下所示:
getData() { 返回 [{" CountryName": "China"，"Pop1995": 1216，"Pop2005": 1297，"Pop2015": 1361，"Pop2025": 1394 }，{"CountryName": "印度","Pop1995": 920,"Pop2005": 1090,"Pop2015": 1251,"Pop2025": 1396},{"CountryName": "美国","Pop1995": 266,"Pop2005": 295,"Pop2015": 322,"Pop2025": 351},{"CountryName": "印度尼西亚","Pop1995": 197,"Pop2005": 229,"Pop2015": 256,"Pop2025": 277},{"CountryName": "巴西","Pop1995": 161,"Pop2005": 186,"Pop2015": 204,"Pop2025": 218}];}
若要使用从getData() 函数返回的数据，请调用Angular ngOnInit() 生命周期钩子内的函数，并将返回的值分配给AppComponent类的data属性。
ngOnInit() { 这个 .数据 = 这个。getData();}
您可以在infragistics中了解有关Angular生命周期的更多信息免费角度要领书。
步骤3: 配置轴
要创建数据图表，必须配置图表选项。通常，图表选项由三个主要属性组成:
- X和y轴
- 数据源
- 系列
除了这些属性之外，其他重要的属性还有height、width、title等等。
要在AppComponent类中配置轴，请添加getchartaces () 函数，如下所示:
getChartAxes() { 返回 [{名称: "NameAxis""categoryX" 类型:“国家”:标签: "CountryName"},{名称: "PopulationAxis"，“numericY” 类型:最小值: 0，标题: “ 百万人口”}]};
X轴和Y轴类型可用于显示财务、散点或类别价格系列。其他可能的值包括category、numericAngle、categoryDateTimeX、categoryAngle等。您可以通过阅读我们的系列类型数据图表来了解这些值和图表类型。
步骤4: 配置系列
Ignite UI数据图表可以具有任意数量的系列，但必须至少有一个系列要向图表中添加序列，请在AppComponent类中添加一个名为getChartSeries的函数，如下所示:
getChartSeries(){ 返回 [{“2015人口”:“列” 类型:isHighlightingEnabled: true,isTransitionInEnabled: true,xAxis: "NameAxis",yAxis: "PopulationAxis",valueMemberPath: "Pop2015"},{“2025人口”:“列” 类型:isHighlightingEnabled: true,isTransitionInEnabled: true,xAxis: "NameAxis",yAxis: "PopulationAxis",valueMemberPath: "Pop2025"}]};
在上面的代码清单中，您正在创建两个系列。“系列类型” 值设置为 “列”，以便创建列系列。如果要创建 “line” 系列，请将type的值设置为 “line”。Ignite UI for JavaScript Angular Components为数据图表提供了超过25种可能的系列类型，包括区域、条形和样条区域。
对于系列valueMemberPath，您需要从要在图表中显示的数据数组中设置属性。在这里，您将从数据源设置 “Pop2015” 和 “Pop2025” 属性，并将其呈现在数据图表系列中。此外，series istriansitioninenabled值设置为true，以便在分配数据源时启用动画。
步骤5: 配置图表选项
您已配置轴和系列。接下来，配置图表选项。在图表选项中，您可以设置数据图表的所有其他重要属性。要了解有关图表属性的更多信息，请参阅Ignite UI for JavaScript数据图表。
要配置数据图表选项，请在AppComponent类中添加一个名为getChartOptions的函数，如下所示:
getChartOptions(){ 返回 {"100%" 宽度:数据源: 此.data轴: this.Getchartaxs ()，此.getChartSeries: 系列 ()};};
在此代码中，您正在设置图表的轴，系列，数据源和宽度属性。您已经创建了图表系列、图表轴和数据源，并使用它们来创建图表选项。
接下来是Angular component initialize图表选项的ngOnInit() 生命周期钩子。为此，请修改AppComponent的ngOnInit() 函数，如下所示:
ngOnInit() { 这个 .数据 = 这个。getData(); 这个 .选项 = 这个。getChartOptions();};
步骤6: 创建图表
要使用Ignite UI DataChart，请在AppComponent模板中添加以下代码 (可以在组件的template属性中，也可以在单独的模板文件中)。
<ig-数据-图表 [(选项)]="选项"[widgetId]='"datachart1"'> </Ig-data-图表>
请记住，你可以在一个单独的HTML文件中此代码，如果组件templteUrl属性设置，而不是模板。您正在使用ig-dat-chart组件和设置选项和widgetId属性。
运行应用程序
当您运行应用程序时，您将发现Ignite UI for JavaScript Angular组件数据图表添加到Angular应用程序中，如下所示:
Ignite UI for JavaScript Angular组件数据图表可以轻松添加到Angular应用程序中。通过几行代码，您可以将功能强大、功能丰富的数据图表添加到Angular应用程序中。在以后的文章中，您将学习启用功能，例如更改系列类型或创建不同类型的图表，例如饼图或区域。
Ignite UI for JavaScript为您提供了60多个组件，这些组件可以通过几个步骤集成到任何web应用程序中。花几分钟时间了解更多信息， 然后试用Ignite UI免费我们的演示应用程序和经验教训是多么容易使用Ignite UI的JavaScript组件，如我们的网格和图表在角。
Dhananjay Kumar作为Infragistics的开发人员布道者。他是七次微软MVP。你可以在Twitter上找到他: @debug_mode。</p