首页 > 网站 > WEB开发 > 正文

Angular 封装highcharts图表

2024-04-27 15:11:07
字体:
来源:转载
供稿:网友

highcharts-ng 的git地址:https://github.com/pablojim/highcharts-ng

我这里使用的npm:

npm install highcharts-ng

HTML代码片段:

<div ng-app="myApp">    <div ng-controller="MyCtrl">        <highchart config="chartConfig"></highchart>    </div></div>

引入相应的js文件:

<script src="js/jquery.js"></script><script src="js/angular.js"></script><script src="js/highcharts.js"></script><script src="js/highcharts-ng.js"></script>

编写js代码:

  var myapp = angular.module('myApp', ["highcharts-ng"]);

myapp.controller('MyCtrl',['$scope',function($scope) {        $scope.chartConfig = {            'options': {                'chart': {                    'type': 'column',//柱状图                    zoomType: 'none',                    plotShadow: true,                    plotBorderWidth: 1                },                'lang': {                    PRintChart:"打印图表",                    downloadJPEG: "下载JPEG 图片" ,                    downloadPDF: "下载PDF文档"  ,                    downloadPNG: "下载PNG 图片"  ,                    downloadSVG: "下载SVG 矢量图" ,                    exportButtonTitle: "导出图片"                },                legend: {enabled: true},                xAxis: {                    gridLineWidth: 1,                    labels: {                        style: {                            fontSize: '12px'                        }                    }                },                yAxis: {                    min: 0, title: {text: false}                },                tooltip: {                    //useHTML: true                },                plotOptions: {                },                'noData': '暂无数据'            },            xAxis: {},            yAxis: {                min: 0,                title: {                    text: false                },                allowDecimals:false            },            legend: {enabled: true},            'series': [{                name: 'Tokyo',                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]            }, {                name: 'New York',                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]            }],            'title': {                'text': ''            },            'credits': {                'enabled': false            },            'loading': false,            'size': {                'height': '500'            },            func: function (chart) {                //    console.log('图表创建成功或数据变化:', chart);            }        }    }]);

说明:主要是要熟悉highcharts的API。这样就能事半功倍的开发出炫丽的图表。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表