代码改变世界

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

2015-05-20 10:13  RTdo  阅读(567)  评论(0编辑  收藏  举报

原文: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 视频教程》
 
官方QQ群:(申请加入,说是我推荐的
  • App实践出真知 434558944       App实践出真知
  • App学习交流 452180823          App实践出真知