使用 AngularJS 和 angular-google-chart 创建图表的自定义指令
5.00/5 (3投票s)
本文将帮助你在 AngularJS 中绘制图表。
引言
AngularJS 最重要的特性是 **指令**，因为它具有扩展 HTML 标签和属性以及可重用性的功能。 如果你了解如何创建 **自定义指令** 并使用它，就可以灵活地操作 AngularJS 代码。
**Angular Google chart** 是 Google 提供的一个非常有用的扩展，用于绘制各种类型的图表。
本文将解释创建自定义指令的简单步骤，这些指令可以根据用户提供的图表类型绘制不同的图表。
文章的其余部分将按照需求、方法、结果、结论和参考文献的顺序进行组织。
要求
要使用 **Angular Google chart** 绘制图形，必须将相应的 JavaScript 文件包含在项目中。 所需的文件名为 ng-google-chart.js，可以从 这里 下载。
别忘了在你的 HTML 页面中设置 ng-google-chart.js 的引用。
方法论
1. 创建自定义指令并使用 google-chart
首先，我们需要创建一个可重用且易于维护的自定义指令，该指令根据从控制器传递的数据绘制图表。 让我们看一下自定义指令及其解释。
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 指令作为模板来绘制图表，即：
<div google-chart chart="colChartObject"></div>
在这里，我们需要设置 chart 属性。 Chart 属性具有不同的属性，例如 type、data、options 等。 再次，options 属性具有几个子属性，这些属性在上面的代码中已提及和解释。
2. 创建所需的控制器
然后，我们需要在 AngularJS 中创建控制器，通过该控制器可以将数据传递给指令。
这里是演示控制器的示例，其中数据被初始化和硬编码，但在实际应用中，数据可能需要从数据库中获取。 为了简单起见，这里的值是硬编码的。
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 被传递给自定义指令，然后自定义指令将数据传递给 google-chart 指令，从而绘制图表。
3. 在 HTML 中使用
创建的自定义指令可以在 HTML 中如下使用：
除了图表数据之外，我们还需要传递标题（将在图表顶部显示）、堆叠（根据 true/false 值，输出将是堆叠或非堆叠）、type（根据类型绘制图表）。
结果
示例 1：柱状图（堆叠）
<div ng-controller="ChartController">
<app-columnchart
data="chartData" title="'Sales per month(Stacked)'"
stacked="true" type="ColumnChart" />
</div>
对于柱状图，类型应为 "ColumnChart"。 这里，传递了 stacked="true" 以获得堆叠输出。
以上数据和输入 HTML 的输出如下：
示例 2：柱状图（非堆叠）
<div ng-controller="ChartController">
<app-columnchart
data="chartData" title="'Sales per month(non-Stacked)'"
stacked="false" type="ColumnChart" />
</div>
这里传递了 stacked="false"。
以上数据和 input HTML 的输出如下：
示例 3：条形图
<div ng-controller="ChartController">
<app-columnchart
data="chartData" title="'Sales per month'"
stacked="false" type="BarChart" />
</div>
对于条形图，类型应为 "BarChart"。
以上数据和 input HTML 的输出如下：
结论
在本文中，介绍了一种更简单的方法来创建自定义指令，该指令可以根据用户输入和需求绘制不同类型的图表。 希望你喜欢阅读这篇文章，并且它对你有所帮助。