AngularJS 图表扩展 Highcharts-ng

蔚落 2022-05-19 06:37 229阅读 0赞

Highcharts-ng 详细介绍

Highcharts-ng 是一个 AngularJS 的指令扩展，实现了在 [AngularJS][] 应用中集成 [Highcharts][] 图表库的功能。

![20072919_Lpuc.png][]

演示地址：[http://jsfiddle.net/pablojim/46rhz/][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
      }
    };

[AngularJS]: http://www.oschina.net/p/angularjs
[Highcharts]: http://www.oschina.net/p/highcharts
[20072919_Lpuc.png]: /images/20220519/928c338a50894daebdfd6f5340f47631.png
[http_jsfiddle.net_pablojim_46rhz]: http://jsfiddle.net/pablojim/46rhz/