javascript - AmCharts Drillup函数与AngularJS不兼容吗？

更新：

创建了一个简单的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代码放在directitive link function中，但是
错误：未捕获ReferenceError：在以下位置未定义mostSoldDrillUp
：1：1在浏览器的控制台弹出。
我试图将其放入controller，相同的输出错误。
只需包括js文件，并在id中制作图表的div
html与controller使用ui-router，输出错误相同。

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

最后是我不在controller中使用route：

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

它可以工作，但出于其他目的，我需要controller作为我的route，因此该方法已被淘汰。

也许有人在此之前有一个想法或经历过，并找到了解决方案。我会很乐意接受的。谢谢。

最佳答案

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

1）在全局/ resetChart范围内定义window。这使您可以将标签保留在图表中。如果您要坚持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;
}

当然，根据需要进行调整。

更新了插件，展示了第二种方法here

关于javascript - AmCharts Drillup函数与AngularJS不兼容吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46729951/

amCharts

javascript - AmCharts Drillup函数与AngularJS不兼容吗？