开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
Highcharts-ng首页、文档和下载 - AngularJS 图表扩展 - 开源中国社区
全部项目分类
我要评价
MIT
JavaScript
跨平台
分享
收藏
130 人收藏
收录时间:2015-05-20
Highcharts-ng 详细介绍

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 的评论 (全部 2 条评论)
{{repayCom.userName}}
豆浆Melon
项目用过,后来换echarts了,自己封装了个echarts-ng,其实很容易搞 #Highcharts-ng#
顶部