Question

我有两个模型： iposectors 和 ipomarketcap ，工厂，根据参数创建模型实例，< strong> BindingCode 将所有绑定在一起。这些模型具有用于测试的硬编码数据，但计划从API检索数据。这是小提琴：highcharts。

什么都没有出现...... 在调试器行上 - 我可以看到创建了高图对象，并且附加了所有数据，但只显示默认标题。我错过了什么？

        var myapp = angular.module('myApp', ["highcharts-ng"]);
    myapp.controller('myctrl', BindingCode);
    myapp.factory("Factory", Factory);

    function iposectors() {
        this.charttitle = "Sector Distribution";
        this.apidata = [
            ['APP Android', 45.0],
            ['APP Ios', 26.8],
            ['Widget Web', 12.8],
            ['MTC BAckoffice', 8.5],
            ['Correo electrónico', 6.2],
            ['Facebook', 6.2],
            ['Twitter', 6.2],
            ['Teléfono', 6.2],
            ['Presencial', 6.2],
        ];
        this.chartConfig = {
            options: {
                chart: {
                    type: 'pie'
                },
                plotOptions: {
                    pie: {
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                legend: {
                    enabled: true,
                    layout: 'vertical',
                    align: 'left',
                    height: 135,
                    width: 160,
                    verticalAlign: 'middle',
                    useHTML: true,
                    labelFormatter: function () {
                        return '<div style="text-align: left; width:120px;float:left;">' + this.name + '  ' + this.percentage.toFixed(1) + '%</div>';
                    },
                    itemStyle: {
                        color: '#421C40',
                        fontWeight: 'bold',
                        fontFamily: 'Century Gothic',
                        fontSize: '10px'
                    }
                },
                tooltip: {
                    pointFormat: '<span style="color:{point.color}">\u25CF</span> Weight: <b>{point.percentage:.1f}%</b>'
                },
            },
            title: {
                text: this.charttitle,
                align: 'center',
                verticalAlign: 'top'
            },
            series: [{
                name: 'Weight',
                size: '75%',
                showInLegend: true,
                data: this.apidata
            }],
            loading: false
        }
    }

    function ipomarketcap() {
        this.charttitle = "Market Cap Distribution";
        this.apidata = [
            ['MC APP Android', 45.0],
            ['MC APP Ios', 26.8],
            ['MC Widget Web', 12.8],
            ['MC MTC BAckoffice', 8.5],
            ['MC Correo electrónico', 6.2],
            ['MC Facebook', 6.2],
            ['MC Twitter', 6.2],
            ['MC Teléfono', 6.2],
            ['MC Presencial', 6.2],
        ];
        this.chartConfig = {
            options: {
                chart: {
                    type: 'pie'
                },
                plotOptions: {
                    pie: {
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                legend: {
                    enabled: true,
                    layout: 'vertical',
                    align: 'left',
                    height: 135,
                    width: 160,
                    verticalAlign: 'middle',
                    useHTML: true,
                    labelFormatter: function () {
                        return '<div style="text-align: left; width:120px;float:left;">' + this.name + '  ' + this.percentage.toFixed(1) + '%</div>';
                    },
                    itemStyle: {
                        color: '#421C40',
                        fontWeight: 'bold',
                        fontFamily: 'Century Gothic',
                        fontSize: '10px'
                    }
                },
                tooltip: {
                    pointFormat: '<span style="color:{point.color}">\u25CF</span> Weight: <b>{point.percentage:.1f}%</b>'
                },
            },
            title: {
                text: this.charttitle,
                align: 'center',
                verticalAlign: 'top'
            },
            series: [{
                name: 'Weight',
                size: '75%',
                showInLegend: true,
                data: this.apidata
            }],
            loading: false
        }
    }

    function BindingCode($scope, Factory) {

        $scope.iposectors = Factory.CreatePieChart('iposectors');
        debugger;
    }

    function Factory() {
        return {
            CreatePieChart: function (type) {
                if (type == 'iposectors') {
                    return new iposectors();
                }
                else {
                    return new ipomarketcap();
                }
            }
        }
    }

html页面

    <div ng-app="myApp">
        <div ng-controller="myctrl">
            @*<highchart id="chart1" config="highchartsNG"></highchart>*@
            <highchart id="chart1" config="chartConfig" class="span9"></highchart>
        </div>
    </div>

Answer 1

问题是您的数据绑定到iposectors属性，而highcharts-ng期望在$scope变量中绑定。例如，您可以通过以下方式绑定此引用：

function BindingCode($scope, Factory) {

    $scope.iposectors = Factory.CreatePieChart('iposectors');
    $scope.chartConfig = $scope.iposectors.chartConfig;

}

现场演示：http://jsfiddle.net/fjv93vvu/

如何使用highcharts-ng去耦合和进行依赖注入

1 个答案: