正文

angularjs+highcharts开发

雨停了  2022-02-10  618

关键词：

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、效果如下：

Highcharts：无法使用AngularJS读取未定义的属性'parentGroup'

】Highcharts：无法使用AngularJS读取未定义的属性\\\'parentGroup\\\'【英文标题】：Highcharts:Cannotreadproperty\'parentGroup\'ofundefinedwithAngularJSHighcharts：无法使用AngularJS读取未定义的属性\'parentGroup\'【发布时间】：2017-11-1107:14:45【问题描述】... 查看详情

使用 Angular js 指令渲染 Highcharts

】使用Angularjs指令渲染Highcharts【英文标题】：RenderingHighchartsusingAngularjsDirectives【发布时间】：2013-04-0101:09:37【问题描述】：我是AngularJS的新手，并试图通过创建指令来呈现我的highcharts（基本线）。请告诉我我应该在这里遵循的... 查看详情

ng升级两个版本的highcharts，错误16(代码片段)

...ade到目前为止运行良好，但我遇到了一个问题，试图合并Highcharts。原始应用程序包含不同版本的highcharts（AngularJS的旧版本）。使用Angular的新（混合记忆）应用程序具有不同版本的highcharts。当两者都使用时，我遇到错误＃16，Hig... 查看详情

highcharts个性化仪表盘(代码片段)

...准备开发个仪表盘美工出图如下。　　由于公司产品集成highcharts，发现highcharts仪表盘不满足需求，顾个性化开发。二、过程：echarts：百度开发，Api目前支持不好，主要采用canvas画图。highcharts：国外产品，Api全还有各路大神的... 查看详情

Angularjs Ionic - 移动设备和平板电脑的不同布局

...16-07-0414:47:54【问题描述】：我正在使用Ionic和angularjs以及Highcharts构建一个移动应用程序。在大多数页面中都有显示数据的滑块。每张幻灯片都有两个包含highchart的垂直div。现在应用程序的要求是，当它在查看详情

highcharts开发图表(代码片段)

1.折线图显示一个静态的折线图，显示如下数据星期温度周一9~14周二4~10周三1~7周四4~9周五5~11周六8~13周天7~10新建demo1.html<html><title>demo1</title><head><scriptsrc="js/jquery-2.1.1.min.js"></script><scrip 查看详情

angularjs插件怎么使用

...插件，这就看你具体需求了。比如我做图表的时候喜欢用highcharts-ng，上传文件的时候用ng-fileupload等。还有做界面的时候可以用angularbootstrap 参考技术Can-grid没研究过，但是文档不全的话就不要用这个了，不如同angular-ui团队开发... 查看详情

HighChart.js 数据源推荐

】HighChart.js数据源推荐【英文标题】：HighChart.jsdatasourcerecommendations【发布时间】：2013-03-2502:32:41【问题描述】：我希望将Highstock.js用于我正在开发并希望通过Highcharts股票库图表实现股票表现的应用程序；http://www.highcharts.com/stock... 查看详情

自动化邮件报告平台-邮件发送highchart图表

...开发，使用人员提出需要在邮件发送的时候自动获取这些highchart图表数据，并显示在平台页面上，当发送邮件的时候也把图表附带在邮件中。highchart是一个比较强大的图表组件，这个图表组件以svg方式渲染在网页上，渲染完毕后... 查看详情

highcharts使用心得

HighCharts使用心得前言：之前非常早的一个项目中使用过highcharts，感觉挺方便的。图表类型也比較丰富，并且还支持数据的下钻，可是假设投入商业使用的话还会有一些版权的问题，所以后来就使用了EChart，这是百度开发的一个... 查看详情

highcharts使用心得

前言：之前非常早的一个项目中使用过highcharts。感觉挺方便的，图表类型也比較丰富。并且还支持数据的下钻，可是假设投入商业使用的话还会有一些版权的问题，所以后来就使用了EChart。这是百度开发的一个开源的图表插件... 查看详情

angularjs引入echarts的demo

最近要用到图表展示，想了想，还是首选Echarts，HighCharts和D3.js备用吧，而项目中也用到了AngularJS，所以需要把Echarts引入到AngularJs中一起使用，试了试，最方便的还是用指令，（虽然指令有点不好调，用了再说）。1、引入angular.j... 查看详情

如何将 Flot 与 AngularJS 集成？

...JQuery插件。我四处搜索，但找不到示例。我也很乐意使用highcharts、google-c 查看详情

highcharts纯javascript图表使用讲解

Highcharts提供大量的选项配置参数，您可以轻松定制符合用户要求的图表，目前官网只提供英文版的开发配置说明文档，而中文版的文档网上甚少，且零散不全。这里，我把Highcharts常用的最核心的参数选项配置整理成文档，与大... 查看详情

图表插件highcharts的动态化赋值，实现图表数据的动态化设置显示(代码片段)

在很早之前就介绍过图表插件Highcharts的使用了，在2014年的随笔《基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts》，这里基本上都介绍的比较完整，基本的设置也没有太大的差异，本篇介绍的是基于Bootstrap开发... 查看详情

highcharts＋nodejs搭建数据可视化平台

前一段时间完成了一个数据可视化项目，由后台NodeJS＋Highcharts框架进行搭建。下面分享一下整个开发过程的流程，以及使用Highcharts框架的经验。一、数据的读取由于数据库使用的是Mysql数据库，在NodeJS中，可... 查看详情

highcharts和echarts图表的异同

简单说一下自己认为highcharts和echarts图表的异同highchart链接echarts链接1.从控件的出处看：前者是外国的公司的专业团队当做公司的重要产品去开发迭代的开源项目，后者是国内百度公司的一个技术团队维护开的开源工具项... 查看详情

组合highchart图在vue中不起作用

】组合highchart图在vue中不起作用【英文标题】：Combinationhighchartgraphnotworkinginvue【发布时间】：2020-12-1312:10:12【问题描述】：我正在开发一个vue应用程序。我正在使用组合高图来显示数据。我在这里面临的问题是柱形图不起作用... 查看详情