Question

更新

创建了一个简单的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中，但是 eror：未捕获的ReferenceError：大多数的DiamondDrillUp未定义为
：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用于我的.active用于其他目的，因此这种方法就完全没了。

也许有人有想法或经历过这个并且有解决方案。我很乐意接受它。感谢。

Answer 1

如上所述，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;
}

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

更新了plunker演示第二种方法here

AmCharts Drillup功能与AngularJS不兼容吗？

1 个答案: