Highcharts-ng 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Highcharts-ng 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: 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
  }
};
展开阅读全文

代码

Highcharts-ng 的相关资讯

还没有任何资讯

Highcharts-ng 的相关博客

Highcharts

Highcharts 是一个用纯JavaScript编写的一个图表库;Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表...

Highcharts

一、Highcharts API 英文:http://api.highcharts.com/highcharts 中文:http://higrid.net/docs/highcharts_cn/ 下载地址:h...

AngularJS的学习--ng-show/ng-hide/ng-if和ng-switch

angularJS 在模板里判断属性后显示相应html怎么写? { <!doctype html> <html ng-app> <head> <meta charset="UTF-8"> ...

highcharts的api

最近再使用highcharts这个插件,非常强大 下载和demo在这里:http://www.highcharts.com 下面是常用的api 参考文档:http://bl...

Highcharts 曲线图

``` Highcharts JS去除Highcharts.com链接的方法 在js文件中找到Credits,然后把enable的属性从!0改为0。 也可以更改为自己需...

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

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

Highcharts-ng 的相关问答

还没有任何问答,马上提问

评论 (2)

加载中
项目用过,后来换echarts了,自己封装了个echarts-ng,其实很容易搞 #Highcharts-ng#
2015/05/20 09:59
回复
举报
angularjs #Highcharts-ng#
2015/09/29 09:22
回复
举报
更多评论
2 评论
128 收藏
分享
返回顶部
顶部