我尝试使用highcharts-ng在MEANJS中创建图形,但它不起作用。什么是highcharts-ng的最佳选择。
1.我已经使用
安装了highchartsbower install highcharts-ng
2。将其包含在applicationModuleVendorDependencies
中var applicationModuleVendorDependencies = ['ngResource', 'ui.router', 'ui.bootstrap', 'ui.utils','highcharts-ng'];
3.包含在资产库
中assets: {
lib: {
css: [
'public/lib/bootstrap/dist/css/bootstrap.css',
'public/lib/bootstrap/dist/css/bootstrap-theme.css',
],
js: [
'public/lib/angular/angular.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-ui-router/release/angular-ui-router.js',
'public/lib/angular-ui-utils/ui-utils.js',
'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',
'public/lib/highstock/js/highcharts.src.js',
'public/lib/highcharts-ng/dist/highcharts-ng.js',
'public/lib/file-saver/FileSaver.js'
]
4.在Index.htm中输入以下代码
<div ng-app="myapp">
<div ng-controller="myctrl">
<div class='container'>
<highchart id='example1' config='config'></highchart>
</div>
</div>
</div>
并将以下代码放入控制器
var myapp = angular.module('myapp',[“highcharts-ng”]);
myapp.controller('myctrl',function($ scope){
$scope.config = {
options: {
chart: {
type: 'column'
},
},
xAxis: {
categories: ['Yes', 'No']
},
series: [{
name: 'Votes',
data: [0, 0]
}],
title: {
text: 'Data-binding Example'
},
subtitle: {
text: 'Is this easy?'
},
credits: {
enabled: false
},
loading: false
};
视图显示没有图表。我遗漏了一些东西? 谢谢。
答案 0 :(得分:0)
您必须使用comand安装oryginal highchart:
bower install highcharts-release
并使用highchart-ng加载它:
...
'public/lib/highcharts-release/adapters/standalone-framework.js',
'public/lib/highcharts-release/highcharts.js',
'public/lib/highcharts-ng/src/highcharts-ng.js',
...
并且在声明模块时不要加载两次highchart-ng(只需要在applicationModuleVendorDependencies中执行):
var myapp = angular.module('myapp');