AmCharts Drillup 函数是否与 AngularJS 不兼容？

Question

更新：

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

单击图表中的返回 link 标签不起作用。

我在使用 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代码放在了directitivelink function但是错误：Uncaught 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 一无所知，并且标签 link 正在 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

AmCharts Drillup 函数是否与 AngularJS 不兼容？

Is AmCharts Drillup function not compatible with AngularJS?

javascript

amcharts

angularjs