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 官网
https://github.com/pablojim/highcharts-ng
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。