通过 highcharts-ng 指令使用 highcharts 添加图表到 angular

Question

我想在我的 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>

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

问候，

Answer 1

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

这里你看到的部分是：

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

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

似乎由于没有抛出错误，指令实际上并未在 angular 中实例化。这应该有所帮助！

也有可能您没有正确包含该库。所有内容都应在该 git 页面上进行解释。

通过 highcharts-ng 指令使用 highcharts 添加图表到 angular

add chart using highcharts to angular via highcharts-ng directive

javascript

highcharts

angularjs

highcharts-ng