使用AngularJS和 Angular 图表创建图表的自定义指令

分享于 

6分钟阅读

Web开发

  繁體

介绍

Angular Google chart是Google用来绘制各种图表的一个非常有益的扩展。

本文解释了创建自定义指令所需的最简单的步骤,以防根据用户提供的图表类型绘制不同类型的图表。

要求

要使用Angular Google图表绘制图形,必须在项目中包含相应的JavaScript文件。名为ng-google-chart.js的必需文件可以从在这里下载。

方法论

1.创建自定义指令和使用google图表

首先,我们需要创建一个可重用且高度可维护的自定义指令,在这种情况下,plot图表相对于从控制器传递的数据,看看custom指令的示例及它解释。

app.directive('appColumnchart',
 function () {
 return {
 scope: { //set up directive's isolated scope filterBy: '=ngModel', 
 data: '=data', 
 title: '=title',
 stacked: '=stacked',
 type: '@' },
 restrict: 'EA',
 transclude: false,
 template:
 '<div google-chart 
 chart="colChartObject"></div>', //including google-chart directive link: function ($scope) {
 $scope.colChartObject = {};
 $scope.colChartObject.type = $scope.type; //setting chart type $scope.colChartObject.displayed = true;
 $scope.Colors = [
 ['#CB7472', '#A895BF', '#F8A769', '#A7514F', '#C0504D', '#9BBB59'],
 ['#7399C9', '#A8C472', '#8AC8D9', '#426690', '#4BACC6', '#8064A2'],
 ['#4F81BD', '#C0504D', '#9BBB59', '#A895BF', '#F8A769', '#A7514F'],
 ['#F79646', '#4BACC6', '#8064A2', '#A8C472', '#8AC8D9', '#426690']
 ];
 $scope.colChartObject.data = $scope.data; //setting chart data//setting chart options $scope.colChartObject.options = {
 title: $scope.title, //chart title isStacked: $scope.stacked, //chart is stacked or not titleTextStyle: { color: '#000000', 
 fontName: 'Open Sans', fontSize: 16, 
 bold: true, italic: false }, //title style height: 250, 
 colors: $scope.Colors[Math.floor(Math.random() * $scope.Colors.length)] //colors };
 }
 }
 });

在这里,创建一个appColumnchart的自定义指令,通过隔离范围接收从控制器传递的不同变量。

指令使用google-chart指令将图表绘制为模板,换句话说:

<divgoogle-chartchart="colChartObject"></div>

这里,我们需要设置chart属性,chart属性有不同的属性,即typedataoptions中又提到了几个子属性。

2.创建必需的控制器

然后,我们需要在AngularJS中创建控制器,通过,它可以将数据传递给指令。

下面是demo控制器的示例,其中数据被初始化和硬编码,但在实际中,需要从数据库,为了简单起见,这里的值采用硬编码形式。

app.controller('ChartController',
[
 function () { 
$scope.chartData= {
 cols: [ //defines number of levels with input type {
 id: "month",
 label: "Month",
 type: "string" },
 {
 id: "Tables-id",
 label: "Tables",
 type: "number" },
 {
 id: "Chairs-id",
 label: "Chairs",
 type: "number" },
 {
 id: "Bed-id",
 label: "Bed",
 type: "number" },
 {
 id: "Desk-id",
 label: "Desk",
 type: "number" }
 ],
 rows: [ // defines input with respect to cols value {
 c: [
 {
 v: "January" },
 {
 v: 19, //value required to plot chart f: "19 Tables"//description which is shown on mouse hover },
 {
 v: 12,
 f: "12 Chairs" },
 {
 v: 7,
 f: "7 Beds" },
 {
 v: 4,
 f: "4 Desks" }
 ]
 },
 {
 c: [
 {
 v: "February" },
 {
 v: 13 },
 {
 v: 1,
 f: "only 1unit" },
 {
 v: 12 },
 {
 v: 2 }
 ]
 },
 {
 c: [
 {
 v: "March" },
 {
 v: 24 },
 {
 v: 5 },
 {
 v: 11 },
 {
 v: 6 }
 ]
 }
 ]
 },
}
]);

上面的代码中的chartData被传递给custom directive,然后将数据传递给绘制图表的google-chart指令。

3.在HTML中使用

所创建的自定义指令可以在HTML中使用,如下所示:

连同图表数据,我们需要传递标题(显示在图表顶部),堆叠(基于true/false值,输出将堆叠或non-stacked ),type (根据图表的类型绘制图表)。

结果

例子1:柱形图(堆叠)
<divng-controller="ChartController"><app-columnchartdata="chartData"title="'Sales per month(Stacked)'"stacked="true"type="ColumnChart"/></div>

对于柱形图,类型应为"ColumnChart"这里,stacked="true"为堆叠输出传递。

上述数据和输入HTML的输出如下所示:

例子2:柱形图(非堆叠)
<divng-controller="ChartController"><app-columnchartdata="chartData"title="'Sales per month(non-Stacked)'"stacked="false"type="ColumnChart"/></div>

这里传递了stacked="false"

上面的数据和input HTML的输出如下所示:

例子3:条形图
<divng-controller="ChartController"><app-columnchartdata="chartData"title="'Sales per month'"stacked="false"type="BarChart"/></div>

对于条形图,类型应为"BarChart"

上面的数据和input HTML的输出如下所示:


angular  DIR  CHAR  chart  Directive  
相关文章