AmCharts Drillup 功能与 AngularJS 不兼容吗？

Question

更新：

创建了一个简单的Plunker 以更好地表达问题。

点击图表中的返回链接标签不起作用。

---

我在使用 AmCharts Drillup 功能时遇到问题，您可以返回之前显示的图表内容。 我能够渲染一个工作的 AmCharts 并且它在向下钻取函数中工作，但是向上钻取，我不能让它在 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 代码放在 directitive link function 但是 错误：未捕获的 ReferenceError：mostSoldDrillUp 未定义于
  :1:1 在浏览器控制台弹出。
• 我试图把它放在controller 中，同样的输出错误。

• 只需包含 js 文件并在 div 中创建一个 id 的图表 html 和 controller 使用 ui-router，同样的输出错误。

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

• 最后一点是我不在我的route 中使用controller：

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

它有效，但我的route 需要一个controller 用于其他目的，因此这种方法根本不存在。

也许那里的某个人以前有过这个想法或经历过这个并有一个解决方案。我会欣然接受。谢谢。

Answer 1

如前所述，AmCharts 对 Angular 的 $scope 一无所知，标签链接在 window 范围内调用 resetChart，而不是在您的控制器中。有几种方法可以解决这个问题

1) 在全局/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