angularJs 的chart 控件谁用过？那个options怎么用

Wijmo控件集中的FlexChart是支持AngularJS的Chart控件。

使用FlexChart的步骤：

添加对Wijmo的引用。

添加标记作为FlexChart的宿主。

通过JavaScript初始化FlexChart和它的itemSource属性。

创建一个或多个数据系列，并将它们添加到FlexChart的系列集合。

（可选）添加一些CSS来自定义图表的外观。

具体的步骤，请参考下面的博客

http://blog.gcpowertools.com.cn/post/wijmo_flexchart_bar.aspx

第一步：准备工作

　将AngularJS脚本添加到该文档的当中：

在此之后，可以在将这套CCS样式添加到行内或者独立的文件当中：

*{

-webkit-box-sizing:border-box

-moz-box-sizing:border-box

box-sizing:border-box

font-family:sans-serif

}

body,html{margin:0}

p{margin:0}

input{width:100%}

pre{

white-space:pre-wrap

white-space:-moz-pre-wrap

white-space:-pre-wrap

white-space:-o-pre-wrap

word-wrap:break-word

}

div.repo{

border-bottom:1pxsolid

cursor:pointer

}

#search,#repo,#user{float:left}

#search{width:20%}

#repo{width:60%}

#user{width:20%}

如大家所见，其中不存在任何多余的内容、只保留最基础的布局方案——将搜索栏置于右侧、库信息位于中央、用户库同样置于右侧。我们还需要将对应代码行打包至标签当中，此后我们还要利用它显示README文件内容——因为这些内容通常来自GitHub Flavored Markdown、而且其中一部分代码行与用户库列表存在重叠。

当然，大家可以向其中添加更多样式以提升成果的视觉效果——但请注意，本教程中的截图都采取最基本的外观设计。

大家可以未来需要编写的JavaScript代码置于本文档的当中或者为其建立独立文件，但独立文件仍然需要处于AngularJS脚本之下。

第二步：模块

现在我们可以为自己的应用程序创建一个模块：

varapp=angular.module('githubsearch',[])

接下来利用ngApp指令将其添加到标签当中：

第三步：控制器

我们还需要为自己的应用程序准备一套控制器。为了简化创建流程，我们将只为应用准备一套控制器，这样我们就不必考虑如何在不同控制器之间进行信息传递了：

app.controller('SearchController',functionSearchController($scope){

})

第四步：基础服务

我们需要对自己的GitHub服务进行定义：

app.factory('GitHub',functionGitHub($http){

return{

}

})

我们将使用app.factory()方法，这样就能保证返回对象附带几个以后将会用到的方法。我们将使用$http服务从GitHub的API中获取数据。

第五步：搜索库

我们服务中的第一项方法负责利用GitHub API对库进行搜索。使用服务非常简单（这项函数能够进入由制造函数返回的对象）：

searchRepos:functionsearchRepos(query,callback){

$http.get('https://api.github.com/search/repositories',{params:{q:query}})

.success(function(data){

callback(null,data)

})

.error(function(e){

callback(e)

})

}

$http.get()方法是执行GET请求的一种捷径。第一条参数是我们希望访问的URL。第二条参数则代表一个具备选项的对象。这里我们只需要params对象——它是一个查询参数散列，将被添加到该请求当中（其中q参数属于搜索字符串，大家可以点击此处了解更多相关信息）。

$http.get()会返回一项承诺。我们可以将监听器附加在success()与error()上，并且据此调用回调函数。

第六步：搜索栏

为了使用我们在之前几步中定义完成的函数，我们需要在自己的HTML当中添加搜索栏。

先从定义一个简单的指令开始。 定义一个指令本质上是在HTML中通过元素、属性、类或注释来添加功能。

AngularJS的内置指令都是以ng开头，如果想自定义指令，建议自定义一个前缀代表自己的命名空间。

这里我们先使用my作为前缀:

var myApp = angular.module('myApp', [])

.directive('myDirective', function() {

return {

restrict: 'A',

replace: true,

template: '<p>Kavlez</p>'

}

})

---