这是AngularJs Google Chart Tools 指令的一个很好的例子。
指示
这些相同的指令在 plunker 本身中。
- 从 github 下载 ng-google-chart.js并将脚本标记添加到您的 html。
创建一个像这样的div:
<div google-chart chart="chart" style="{{chart.cssStyle}}">
</div>
像这样将“googlechart”添加到您的模块中:
angular.module('myApp',[ 'googlechart', ...
- 填充
$scope.chart
这样的:
{
"type": "ColumnChart",
"cssStyle": "height:200px; width:300px;",
"data": {
"cols": [
{
"id": "month",
"label": "Month",
"type": "string",
"p": {}
},
{
"id": "laptop-id",
"label": "Laptop",
"type": "number",
"p": {}
},
{
"id": "desktop-id",
"label": "Desktop",
"type": "number",
"p": {}
},
{
"id": "server-id",
"label": "Server",
"type": "number",
"p": {}
},
{
"id": "cost-id",
"label": "Shipping",
"type": "number"
}
],
"rows": [
{
"c": [
{
"v": "January"
},
{
"v": 19,
"f": "42 items"
},
{
"v": 12,
"f": "Ony 12 items"
},
{
"v": 7,
"f": "7 servers"
},
{
"v": 4
}
]
},
{
"c": [
{
"v": "February"
},
{
"v": 13
},
{
"v": 1,
"f": "1 unit (Out of stock this month)"
},
{
"v": 12
},
{
"v": 2
}
]
},
{
"c": [
{
"v": "March"
},
{
"v": 24
},
{
"v": 0
},
{
"v": 11
},
{
"v": 6
}
]
}
]
},
"options": {
"title": "Sales per month",
"isStacked": "true",
"fill": 20,
"displayExactValues": true,
"vAxis": {
"title": "Sales unit",
"gridlines": {
"count": 6
}
},
"hAxis": {
"title": "Date"
}
},
"formatters": {},
"displayed": true
}