angularjs+highcharts开发

1、angularjs+highcharts,highcharts的引入要通过指令的方式，要引入highcharts-ng.js文件，但是要注意此文件的中的数据格式。{options:{},series:{}},options包括了大部分的配置，series是图表数据

 2、在html页面中可直接写写入：<highchart series='chart.series' options='series.options'></highchart>

3、其中出现了样式变为全黑的情况，解决方法是引入他们官网的highcharts.js就可以解决，同时导出为黑色的图片也得到了解决

4、注意highcharts-ng.js的源文件的写法，找到一个适合自己项目的文件，或者是将文件改成自己需要的样子，其中图表自适应的问题，就是将指令中的template:<div></div>,replace:true,便可解决

 5、代码如下：

  1 <!DOCTYPE html>
  2 <html lang="en" ng-app="myChart">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <!--<link rel="stylesheet" href="css/highcharts.css">-->
  7     <script src="js/jquery.min.js"></script>
  8     <script src="js/highcharts.js"></script>
  9     <script src="js/exporting.js"></script>
 10     <script src="js/angular.min.js"></script>
 11     <script src="js/highcharts-ng.js"></script>
 12 </head>
 13 <body>
 14     <div ng-controller="BigChart">
 15         <highchart series="chartConfig.series" options="chartConfig.options" class="span10"></highchart>
 16     </div>
 17     <script>
 18         var myApp = angular.module('myChart',["highcharts-ng"]);
 19         Highcharts.setOptions({
 20             lang:{
 21                 contextButtonTitle: "图表导出菜单",
 22                 downloadJPEG:"下载 JPEG 图片",
 23                 downloadPDF:"下载 PDF 文件",
 24                 downloadPNG:"下载 PNG 文件",
 25                 downloadSVG:"下载 SVG 文件",
 26                 printChart:"打印图表"
 27             }
 28         });
 29         var dafaultMenuItem = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;
 30         myApp.controller('BigChart', ['$scope',function($scope) {
 31             var chartConfig = {
 32                 options:{
 33                     chart: {
 34                         type: 'column'
 35                     },
 36                     exporting: {
 37                         buttons: {
 38                             contextButton: {
 39                                 // 自定义导出菜单项目及顺序
 40                                 menuItems: [
 41                                     dafaultMenuItem[0],
 42                                     dafaultMenuItem[2],
 43                                     dafaultMenuItem[3],
 44                                     dafaultMenuItem[4],
 45                                     dafaultMenuItem[5]
 46                                 ]
 47                             }
 48                         }
 49                     },
 50                     title: {
 51                         text: 'Stacked column chart'
 52                     },
 53                     xAxis: {
 54                         categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
 55                     },
 56                     yAxis: {
 57                         min: 0,
 58                         title: {
 59                             text: 'Total fruit consumption'
 60                         },
 61                         stackLabels: {
 62                             enabled: true,
 63                             style: {
 64                                 fontWeight: 'bold',
 65                                 color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
 66                             }
 67                         }
 68                     },
 69                     legend: {
 70                         align: 'right',
 71                         x: -70,
 72                         verticalAlign: 'top',
 73                         y: 20,
 74                         floating: true,
 75                         backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
 76                         borderColor: '#CCC',
 77                         borderWidth: 1,
 78                         shadow: false
 79                     },
 80                     tooltip: {
 81                         formatter: function() {
 82                             return '<b>'+ this.x +'</b><br/>'+
 83                                     this.series.name +': '+ this.y +'<br/>'+
 84                                     'Total: '+ this.point.stackTotal;
 85                         }
 86                     },
 87                     plotOptions: {
 88                         column: {
 89                             stacking: 'normal',
 90                             dataLabels: {
 91                                 enabled: true,
 92                                 color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
 93                                 style: {
 94                                     textShadow: '0 0 3px black, 0 0 3px black'
 95                                 }
 96                             }
 97                         }
 98                     },
 99                 },
100                 series: [{
101                     name: 'John',
102                     data: [5, 3, 4, 7, 2]
103                 }, {
104                     name: 'Jane',
105                     data: [2, 2, 3, 2, 1]
106                 }, {
107                     name: 'Joe',
108                     data: [3, 4, 4, 2, 5]
109                 }]
110             };
111             $scope.chartConfig = chartConfig;
112 
113 //            $('#container').highcharts(chartConfig);
114         }])
115     </script>
116 </body>
117 </html>

6、效果如下：

 

posted @ 2017-05-16 11:27  雨停了  阅读(822)  评论(0)  编辑  收藏  举报