Question

所以我正在尝试创建一个下拉列表，只要用户选择他们的选择，就会将我的HighCharts从条形图变为饼图我很肯定我有正确的代码，但我一直收到这个错误：无法读取未定义的属性'系列'我已经删除了十几个例子，但似乎没有一个例子适用于我在Angular Directive中有它

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS + Highcarts </title>
    <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
    <link href='css/highChartCss.css' rel='stylesheet' type='text/css'>
</head>
<body>
<select id="chartType">
    <option value="0">-select chart type-</option>
    <option value="line">line</option>
    <option value="column">column</option>
</select>
<div id="content">
</div>
<div id="graph">
    <section ng-app='charts'>
        <div ng-controller="Ctrl">
            <highchart chart='CDHLeads'></highchart>
        </div>
    </section>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="js/webSocket.js"></script>
<script type="text/javascript" src="js/highChartAngular.js"></script>
</body>
</html>

highChartAngular.js

function log() {
    var formattedDate = new Date();
    document.getElementById("content").innerHTML = formattedDate;
}
Highcharts.setOptions({
    colors: ['#0266C8', '#0EE', '#F93', '#DDDF00', '#F90101']
});

function buildChart(title, yAxisLabel, xAxisLabels, series) {
    $(function () {
        $('#container').highcharts({
            credits: {
                enabled: false
            },
            chart: {
                renderTo: 'CDHLeads',
                type: 'column',
                backgroundColor: '#000000'
            },
            legend: {
                itemStyle: {
                    fontSize: '12px',
                    font: '12pt Inconsolata, sans-serif',
                    color: '#FFF'
                }
            },
            title: {
                text: title,
                style: {
                    font: '12pt Inconsolata, sans-serif',
                    color: 'white'
                }
            },
            xAxis: {
                categories: xAxisLabels,
                style: {
                    font: '12pt Inconsolata, sans-serif',
                    color: 'white'
                }
            },
            plotOptions: {

                series: {
                    colorByPoint: false
                }
            },
            yAxis: {
                title: {
                    text: yAxisLabel
                },
                tyle: {
                    font: '12pt Inconsolata, sans-serif',
                    color: 'white'
                }
            },
            series: series
        });
    });
    $("#chartType").change(function() {
        var type = this.value;
        if(type !== '0') {
            var cdh = $('#CDHLeads').highcharts();
            $(cdh.series).each(function(){
                this.update({
                    type: type
                }, false);
            });
            cdh.redraw();
        }
    });
}

var app = angular.module('charts', []);

app.directive('highchart', [function () {
    return {
        restrict: 'E',
        template: '<div id="container">',
        replace: true,
        link: function (scope, element, attrs) {

            scope.$watch(attrs.chart, function () {

                if (!attrs.chart) return;

                var chart = scope.$eval(attrs.chart);

                angular.element(element).highcharts(chart);
            });

        }
    }
}]);

function Ctrl($scope) {
    $scope.example_chart = buildChart();
}

Answer 1

我怀疑以下两行是问题所在：

var cdh = $('#CDHLeads').highcharts();
$(cdh.series).each(function(){

错误消息告诉您的是cdh未定义。我认为这是因为$('#CDHLeads')实际上并没有找到你没有设置ID字段的图表元素。我试着改变：

<highchart chart='CDHLeads'></highchart>

到

<highchart id="CDHLeads" chart='CDHLeads'></highchart>

Answer 2

相反

var cdh = $('#CDHLeads').highcharts();

使用

var cdh = $('#container').highcharts();

因为在您的模板中，容器是图表ID。

使用AngularJs

2 个答案: