添加一個下拉到Highcharts用AngularJs改變圖表類型

所以我想創建一個下拉列表，將我的HighCharts從條形圖轉變爲餅圖，只要用戶選擇他們的選擇我是積極的我有正確的代碼，但我不斷收到此錯誤：無法讀取的不確定我已經不過十幾例屬性「系列」，但似乎都不適用，我有它的一個角指令添加一個下拉到Highcharts用AngularJs改變圖表類型

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

來源

2015-10-13 user2402107

相反

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

使用

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

，因爲在你的模板，容器病歷ID。

來源

2015-10-13 19:33:51

我懷疑這是以下兩行是問題：

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

什麼錯誤消息告訴你的是，cdh是不確定的。我想這是因爲$('#CDHLeads')實際上並沒有找到你之前沒有設置ID字段的圖表元素。我想嘗試改變：

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

到

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

來源

2015-10-13 16:02:26

嘿，謝謝你的迴應，但現在沒有出現，並且沒有新的錯誤來解釋爲什麼 – user2402107

添加一個下拉到Highcharts用AngularJs改變圖表類型

回答

相關問題