转载

Highcharts-ng —— AngularJS 的图表扩展

5月23日西安 OSC 源创会开始报名啦，存储、虚拟机、Docker 等干货分享

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   } };

正文到此结束