Javascript 向Highcharts添加下拉列表以使用AngularJs更改图表类型_Javascript_Jquery_Html_Angularjs_Highcharts

Javascript 向Highcharts添加下拉列表以使用AngularJs更改图表类型

javascript jquery html angularjs highcharts

Javascript 向Highcharts添加下拉列表以使用AngularJs更改图表类型,javascript,jquery,html,angularjs,highcharts,Javascript,Jquery,Html,Angularjs,Highcharts,因此，我试图创建一个下拉列表，每当用户选择他们的选项时，它会将我的HighCharts从条形图变为饼图。我肯定我有正确的代码，但我总是遇到这样的错误：无法读取未定义的属性“series”我已经查看了十几个示例，但似乎没有一个适用于我的示例角度指令内部 index.html <!DOCTYPE html> <html> <head> <title>AngularJS + Highcarts </title> <lin

因此，我试图创建一个下拉列表，每当用户选择他们的选项时，它会将我的HighCharts从条形图变为饼图。我肯定我有正确的代码，但我总是遇到这样的错误：无法读取未定义的属性“series”我已经查看了十几个示例，但似乎没有一个适用于我的示例角度指令内部

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>


AngularJS+高车
-选择图表类型-
线
柱

highchartangle.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();
}

函数日志（）{
var formattedDate=新日期（）；
document.getElementById（“内容”）.innerHTML=formattedDate；
}
Highcharts.setOptions({
颜色：['0266C8'、'0EE'、'F93'、'DDDF00'、'F90101']
});
函数构建图（标题、yAxisLabel、XaxiLabels、系列）{
$（函数（）{
$（“#容器”）。高图({
学分：{
已启用：false
},
图表：{
renderTo:“CDHLeads”，
键入：“列”，
背景颜色：'#000000'
},
图例：{
项目样式：{
fontSize:'12px'，
字体：“12pt不连续线，无衬线”，
颜色：'#FFF'
}
},
标题：{
正文：标题，
风格：{
字体：“12pt不连续线，无衬线”，
颜色：“白色”
}
},
xAxis：{
类别：Xaxis标签，
风格：{
字体：“12pt不连续线，无衬线”，
颜色：“白色”
}
},
打印选项：{
系列：{
colorByPoint:错误
}
},
亚克斯：{
标题：{
文本：yAxisLabel
},
泰勒：{
字体：“12pt不连续线，无衬线”，
颜色：“白色”
}
},
系列：系列
});
});
$（“#图表类型”）.change（函数（）{
变量类型=此值；
如果（类型！='0'）{
var cdh=$（'#CDHLeads'）.highcharts（）；
$（cdh.series）.each（function（）{
这是更新({
类型：类型
}，假）；
});
cdh.redraw（）；
}
});
}
var app=angular.module（'图表'，[]）；
应用指令（'highchart'，[函数（）{
返回{
限制：'E'，
模板：“”，
替换：正确，
链接：函数（范围、元素、属性）{
范围.$watch（属性图，函数（）{
如果（！属性图表）返回；
var图表=范围$eval（属性图表）；
角度。元素（元素）。高图（图表）；
});
}
}
}]);
函数Ctrl（$scope）{
$scope.example_chart=buildChart（）；
}

我怀疑问题出在以下两行：

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

错误消息告诉您的是，

cdh

未定义。我认为这是因为，

$（“#CDHLeads”）

实际上没有找到您要查找的图表元素，因为您没有设置ID字段。我会尝试改变：

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

到

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

使用

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

嘿，谢谢您的回复，但是现在没有出现任何内容，也没有新的错误来解释原因

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

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