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

【问题标题】：Unable to create graphs using highcharts-ng in meanjs. how to create graphs from the existing table in MEANJS无法在 meanjs 中使用 highcharts-ng 创建图表。如何从 MEANJS 中的现有表创建图形
【发布时间】：2014-12-04 08:55:02
【问题描述】：

我曾尝试使用 highcharts-ng 在 MEANJS 中创建图表，但它不起作用。什么是 highcharts-ng 的最佳选择。

1.我已经安装了highcharts使用

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>

并将以下代码放入控制器中

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
};

视图没有显示图表。我错过了什么吗？谢谢。

【问题讨论】：

您是否在控制台中收到任何错误？您可以将其重新创建为现场演示吗？
确保还包括 highcharts（不仅仅是 highcharts-ng）
谢谢 sebastian 和 dylants，我现在正在使用谷歌图表。

标签： javascript angularjs highcharts meanjs

【解决方案1】：

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

【讨论】：