通过 highcharts-ng 指令将使用 highcharts 的图表添加到角度答案

【问题标题】：add chart using highcharts to angular via highcharts-ng directive通过 highcharts-ng 指令将使用 highcharts 的图表添加到角度
【发布时间】：2015-08-20 16:54:27
【问题描述】：

我想在我的 Angular 应用程序中添加一个图表。我决定使用 highchart-ng 指令。这是控制器：

discoutControllers.controller('TestController', function($scope/*, $location,$route,TableUtility, TestService*/) {  

    $scope.options = {
            type: 'line'
        }

        $scope.swapChartType = function () {
            if (this.highchartsNG.options.chart.type === 'line') {
                this.highchartsNG.options.chart.type = 'column'
            } else {
                this.highchartsNG.options.chart.type = 'line'
            }
        }

        $scope.highchartsNG = {
            options: {
                chart: {
                    type: 'column'
                }
            },
            series: [{
                data: [10, 15, 12, 8, 7]
            }],
            title: {
                text: 'Hello'
            },
            loading: false
        }


});

这是视图：

<div ng-controller='TestController' id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
                <highchart id="chart1" config="highchartsNG"></highchart>
            </div>

问题是当我查看我的页面时没有呈现任何内容，我不知道发生了什么。

问候，

【问题讨论】：

控制台中有什么东西吗？还要确保在应用中包含 highchartsng 模块作为依赖项。
控制台中没有任何显示
确定如何将 highchartng 作为模块加载？
我会回复的。

标签： javascript angularjs highcharts highcharts-ng

【解决方案1】：

https://github.com/pablojim/highcharts-ng

这里你可以看到这个部分：

将 Highcharts 添加到您的 Angular 应用配置中：

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

似乎由于没有引发错误，因此该指令实际上并未以角度实例化。这应该会有所帮助！

您也可能没有正确地包含该库。一切都应该在那个 git 页面上解释。

【讨论】：