繁体   English   中英

无法在meanjs中使用highcharts-ng创建图。 如何从MEANJS中的现有表创建图形

[英]Unable to create graphs using highcharts-ng in meanjs. how to create graphs from the existing table in MEANJS

我尝试使用highcharts-ng在MEANJS中创建图形,但无法正常工作。 highcharts-ng的最佳替代方法是什么。

1.我已经使用安装了图表

bower 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>
  1. 并将以下代码放入控制器

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

    myapp.controller('myctrl',函数($ 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 }; 

该视图未显示任何图形。我错过了一些东西吗? 谢谢。

您必须使用comand安装原始的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');  

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM