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