AngularJS 图表扩展 Highcharts-ng

MIT
JavaScript
跨平台
2015-05-20
红薯

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
  }
};
加载中

评论(2)

豆浆Melon
豆浆Melon
项目用过,后来换echarts了,自己封装了个echarts-ng,其实很容易搞 #Highcharts-ng#

暂无资讯

暂无问答

highcharts实践教训

highcharts java 统计图

2016/01/25 20:54
12
1
Highcharts插件制作中文教程

Highcharts强大的扩展功能,是它深受广大用户喜爱的原因之一。通过使用highcharts api,很多使用者根据自己的需求制作了highcharts插件,实现了各种功能扩展。关于highcharts 中文教程资源已...

2014/05/20 16:43
294
0
​网页图表Highcharts实践教程之图表代码构成

网页图表Highcharts实践教程之图表代码构成

2015/05/28 10:32
363
0
网页图表Highcharts实践教程之认识Highcharts

网页图表Highcharts实践教程之认识Highcharts

2015/05/27 15:51
610
0
Highcharts图表结构分析:详解标题与副标题

JavaScript图表Highcharts默认,标题显示在图表的头部,可选的副标题显示在其下。

2013/12/31 14:24
1K
0
多功能图表之highcharts的使用说明

js图表库,HighCharts的使用说明

2015/12/23 09:24
581
0
javascript 图标分析工具

1、highcharts Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前...

2013/03/01 14:23
210
0
去掉highcharts右下角版权

highcharts是非常不错的图表插件,一般切图网(qietu.com)在做涉及到图表的操作的时候,一般优先选择highcharts,第一个是因为highcharts算是这类插件里面最主流的一款,另一个原因是我们用...

2018/03/16 13:34
80
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部