[收录] Highcharts-ng —— AngularJS 的图表扩展

原文：http://www.tuicool.com/articles/u6VZJjQ

 

Highcharts-ng 是一个 AngularJS 的指令扩展，实现了在AngularJS 应用中集成Highcharts 图表库的功能。

演示地址： http://jsfiddle.net/pablojim/46rhz/

使用方法：

var myapp = angular.module('myapp', ["highcharts-ng"]);

HTML：

<highchart id="chart1" config="chartConfig"></highchart>

chartConfig:

//This is not a highcharts object. It just looks a little like one!

var chartConfig = { options: {   //This is the Main Highcharts chart config. Any Highchart options are valid here.   //will be overriden by values specified below.   chart: {    type: 'bar'   },   tooltip: {    style: {     padding: 10,     fontWeight: 'bold'    }   } }, //The below properties are watched separately for changes. //Series object (optional) - a list of series using normal highcharts series options. series: [{  data: [10, 15, 12, 8, 7] }], //Title configuration (optional) title: {  text: 'Hello' }, //Boolean to control showng loading status on chart (optional) //Could be a string if you want to show specific loading text. loading: false, //Configuration for the xAxis (optional). Currently only one x axis can be dynamically controlled. //properties currentMin and currentMax provied 2-way binding to the chart's maximimum and minimum xAxis: { currentMin: 0, currentMax: 20, title: {text: 'values'} }, //Whether to use HighStocks instead of HighCharts (optional). Defaults to false. useHighStocks: false, //size (optional) if left out the chart will default to size of the div or something sensible. size: {  width: 400,  height: 300 }, //function (optional) func: function (chart) {  //setup some logic for the chart } };

快速使用Romanysoft LAB 的技术实现 HTML 开发Mac OS App，并销售到苹果应用商店中。

 

《HTML开发Mac OS App 视频教程》

• 土豆网同步更新：http://www.tudou.com/plcover/VHNh6ZopQ4E/
• 百度网盘同步：http://pan.baidu.com/s/1jG1Q58M
• 分享  [中文纪录片]互联网时代   http://pan.baidu.com/s/1qWkJfcS

 

官方QQ群：（申请加入，说是我推荐的 ）

• App实践出真知 434558944       
• App学习交流 452180823