2014-12-04 44 views
0

我尝试过使用highcharts-ng在MEANJS中创建图表,但它不工作。什么是highcharts-ng的最佳选择。无法在meanjs中使用highcharts-ng创建图表。如何从MEANJS中的现有表创建图表

1.I已经使用

bower install highcharts-ng 

2.包括在applicationModuleVendorDependencies

var applicationModuleVendorDependencies = ['ngResource', 'ui.router', 'ui.bootstrap', 'ui.utils','highcharts-ng']; 

在资产3.included LIB

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.put以下安装highcharts代码在Index.htm

<div ng-app="myapp"> 
    <div ng-controller="myctrl"> 
     <div class='container'> 
        <highchart id='example1' config='config'></highchart> 
     </div> 
    </div> 
    </div> 
  • 和把下面的代码在控制器

    变种的myapp = angular.module( 'MYAPP',[ “highcharts-NG”]);

    myapp.controller( 'myctrl',函数($范围){

    $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 
    }; 
    
  • 视图显示没有graph.Am我错过了一些东西? 谢谢。

    +0

    你在控制台收到任何错误?你是否能够将其重新创建为现场演示? – 2014-12-04 11:33:53

    +0

    请确保还包括highcharts(不只是highcharts-ng) – dylants 2014-12-05 02:37:22

    +0

    谢谢sebastian和dylants,我现在使用google图表。 – Adithi 2014-12-05 04:57:20

    回答

    0

    你必须安装带阴影的阴影图:

    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');