AmCharts Drillup功能與AngularJS不兼容？

Question

UPDATE：

創建了一個簡單Plunker更好地表達了這個問題。

單擊圖表中的返回鏈接標籤不起作用。

---

我在AmCharts Drillup函數中遇到問題，您可以返回到之前的圖表顯示的內容。 我能夠渲染一個正在工作的AmCharts，並且它在Drilldown函數中工作，但是Drilling Up，我無法讓它在AngularJS中工作。

錯誤控制檯：

當誤差來自：

......................... 
// add back link 
// let's add a label to go back to yearly data 
event.chart.addLabel(
    70, 10, 
    "< Go back", 
    undefined, 
    13, 
    undefined, 
    undefined, 
    undefined, 
    true, 
    'javascript:mostSoldDrillUp();'); <------- THIS IS THE LINK LABEL FOR DRILLUP 
................................. 

function mostReferralsDrillUp() { 
........... 
........... 
} 

的事情，我想：

• 我把它AmChart JS C在directitivelink function但 錯誤：未捕獲的ReferenceError：mostSoldDrillUp未定義在
  ：1：1彈出在瀏覽器的控制檯。
• 我試圖把它放在一個controller內，輸出錯誤相同。

• 只需包括JS文件，並進行圖的id在div在 html使用ui-router，相同的輸出誤差controller。

  .state('home', { 
       url: '/', 
       templateUrl: './pages/home.html', 
       controller: 'HomeCtrl' 
      }) 
  

• 最後就是我不使用controller我route：

  .state('home', { 
       url: '/', 
       templateUrl: './pages/home.html', 
       // controller: 'HomeCtrl' 
      }) 
  

它的工作原理，但我需要一個controller我route用於其它目的，因爲這種方法是乾脆出來。

也許有人在那裏有一個想法或經歷過這一點，並有一個解決方案。我會很樂意接受它。謝謝。

Answer 1

如上所述，AmCharts對Angular的$scope沒有任何瞭解，標籤鏈接在window範圍內調用resetChart，而不是在您的控制器中。有幾種方法可以解決此問題

1）在global/window範圍內定義resetChart。這可以讓您將標籤保留在圖表中。如果你試圖堅持Angular的最佳實踐，這絕對不是推薦的方法，但它會起作用。

//inside controller 
window.resetChart = function() { 
    chart.dataProvider = chartData; 
    chart.titles[0].text = 'Yearly data'; 

    // remove the "Go back" label 
    chart.allLabels = []; 

    chart.validateData(); 
    chart.animateAgain(); 
} 

2）將resetChart方法附加到控制器的作用域，並使用外部元素處理圖表重置，而不是使用圖表標籤。這看起來不會很漂亮，但它比投擲window中的東西更不馬虎。根據需要當然

home.html做爲

<h1>HOME STATE</h1> 
<button ng-show="isDrillDown" ng-click="resetChart()">Go back to yearly</button> 
<div id="chartdiv"></div> 

的script.js

chart.addListener("clickGraphItem", function(event) { 
    if ('object' === typeof event.item.dataContext.months) { 

    // set the monthly data for the clicked month 
    event.chart.dataProvider = event.item.dataContext.months; 

    // update the chart title 
    event.chart.titles[0].text = event.item.dataContext.category + ' monthly data'; 

    // validate the new data and make the chart animate again 
    event.chart.validateData(); 
    event.chart.animateAgain(); 
    $scope.isDrillDown = true; 
    } 
}); 

// function which resets the chart back to yearly data 
$scope.resetChart = function() { 
    chart.dataProvider = chartData; 
    chart.titles[0].text = 'Yearly data'; 

    // remove the "Go back" label 
    chart.allLabels = []; 

    chart.validateData(); 
    chart.animateAgain(); 
    $scope.isDrillDown = false; 
} 

的摘錄調整。

更新plunker證明了第二種方法here