Как расцепить и сделать инъекцию зависимостей с помощью highcharts-ng

0

У меня есть две модели: iposectors и ipomarketcap, фабрика, которая создает экземпляр модели в зависимости от параметра и BindingCode, который связывает все вместе. Модели имеют жестко кодированные данные для тестирования, но планируют извлекать данные из API. Вот скрипка: highcharts.

Ничего не появляется... Когда на линии отладчика - я вижу, что объект highchart создан, и все данные подключены, но появляется только название по умолчанию. Что мне не хватает?

        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>
Теги:
highcharts

1 ответ

1
Лучший ответ

Проблема в том, что ваши данные iposectors свойству iposectors, а highcharts-ng ожидает config в переменной $scope. Например, вы можете привязать эти ссылки таким образом:

function BindingCode($scope, Factory) {

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

}

Демо-версия: http://jsfiddle.net/fjv93vvu/

  • 0
    Спасибо, Павел, это сработало отлично. Вот обновленная скрипка с обоими круговыми диаграммами: jsfiddle.net/ksutine/4774vmcs

Ещё вопросы

Сообщество Overcoder
Наверх
Меню